I have noticed several small rendering differences between the PCF Sandbox and actual deployed PCFs in a model-driven app. Specifically, react elements appear to drop some style characteristics when they render in the model-driven apps that are otherwise respected in the Sandbox.
Attached is a screen shot with one simple example: a Fluent UI slider control with OriginFromZero.
When it renders in the Sandbox (attachment Shot1), notice two things: the label is centered over the slider, respecting the Stacking element from FluentUI and the "inactive" portion of the slider (everything outside the actively selected value) is a soft gray.
But, when the same control is packaged as a solution and deployed to a form (Shot2), the label left-aligned and the inactive portion of the slider disappears altogether.
In the case of the text-align, this appears to be the result of an inheritance from a container div created by the Sandbox with class "control-pane". OK, so that one is understandable; there probably shouldn't be a parent div injecting its own inheritances unless it replicates CDS, but that's also pretty easy to circumvent just by overwriting it myself in styles, so we'll skip past that for now...
The really weird one here is the slider inactive portion because this is where the Sandbox is correctly presenting the FluentUI element (with class inactiveSection, background rgb(200, 198, 196) to give it that nice soft gray: see Shot3). But once it is deployed to the form. that same class has no background attribute at all (would be Shot4, but there is a 3-attachment limit in these posts), hence why it is invisible!
OK, so let's recap:
- Issue 1: the Sandbox has a container div that is passing its own inheritances to the pcf so it renders one way in Sandbox, but not necessarily the same once deployed. Easy enough to work around, but probably shouldn't be that way, in my opinion.
- Issue 2: Once deployed to a model-driven app, a specific "background" style element of a Fluent UI element is being dropped altogether, which I don't understand and don't see a clear path to working around.
Has anyone else observed these, and does anyone know a good workaround for #2?
Solved! Go to Solution.
2 points to Scott for getting that one right on the nose.
But all the same, I still feel like we're looking at a bug here. I can see how unknown, third-party React classes could conflict with the styles in MDApps and there isn't a lot MSFT can do about that, but shouldn't we expect that first-party recommended style set should slip in seamlessly?
@HemantG - can we advance this as a 🐛?
@cchannon Thanks for taking the time to work through this -- I'll be adding a tracking issue on our side to see if there's anything we can do to make this sort of issue easier to track down in the future.