Pascal Case of course but what about nesting like 'MyPcf.Foo.Bar'. Somehow my css doesn't get applied. Is this by design or a bug?
Solved! Go to Solution.
@hansgfixed I've tried to repro, running this command to create my PCF component:
pac pcf init --namespace Long.NameSpace.For --name MyControl --template field
And when rendered, I get this class attribute on my container DIV:
class="customControl Long NameSpace.For.MyControl Long.NameSpace.For.MyControl"
So the container has:
From what you've posted in this thread:
MyPcf.Foo.Bar\.FooBarControl #inputid {background-color: red;}
The issue I'm seeing is the missing . at the beginning of your CSS selector indicating that you're looking for a class not an element named MyPcf, and the other \ characters indicating that this is a long class name that uses dots, not a string of classes on the same element, so this should work:
.MyPcf\.Foo\.Bar\.FooBarControl #inputid {background-color: red;}
Visual Studio Code showing what this CSS selector would match
quick tested it on the test control and I was able to see the style apppied in the debug harness.
Thanks for the reply.
This is strange. What I observed is that the container contains the following class composition in a regular namespace
customControl MyPcfRegularNamespace FooBarControl MyPcfRegularNamespace.FooBarControl
while the "nested" namespace container classes are
customControl MyPcf Foo.Bar.FooBarControl MyPcf.Foo.Bar.FooBarControl
The css resource gets loaded. Checked this by directly selecting an id instead of going with the namespace and controlname and added some styles.
So when adding the namespace and control class like
MyPcf.Foo.Bar\.FooBarControl #inputid {background-color: red;}
The obvious background color doesn't get applied anymore.
Meanwhile I'll try figuring out what could be the issue that the classes differ in composition in contrast when I used just an oneword namespace.
I've just created a second pcf control with the namespace CompanyName.Crm.Pcf and as expected the applied css class is
customControl CompanyName Crm.Pcf.SampleAutocomplete CompanyName.Crm.Pcf.SampleAutocomplete
where the namespace is not part of the sub-namespaces like it should be.
I've also created another project like yours with only one sub-namespace and the css gets applied.
@HemantG, please test this again with the same namespace and (minimum 2) sub-namespaces. If you can reproduce the issue I guess it's a bug considering there shouldn't be a limitation on sub-namespaces.
Thanks!
Bumping own thread as it is not possible as of now to use more than two sub-namespaces.
@hansgfixed I've tried to repro, running this command to create my PCF component:
pac pcf init --namespace Long.NameSpace.For --name MyControl --template field
And when rendered, I get this class attribute on my container DIV:
class="customControl Long NameSpace.For.MyControl Long.NameSpace.For.MyControl"
So the container has:
From what you've posted in this thread:
MyPcf.Foo.Bar\.FooBarControl #inputid {background-color: red;}
The issue I'm seeing is the missing . at the beginning of your CSS selector indicating that you're looking for a class not an element named MyPcf, and the other \ characters indicating that this is a long class name that uses dots, not a string of classes on the same element, so this should work:
.MyPcf\.Foo\.Bar\.FooBarControl #inputid {background-color: red;}
Visual Studio Code showing what this CSS selector would match
Many thanks Greg. This obviously was the issue all along.
User | Count |
---|---|
3 | |
2 | |
2 | |
1 | |
1 |