cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
cchannon
Impactful Individual
Impactful Individual

React elements in PCF render differently in Sandbox vs Model-Driven App

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?

11 REPLIES 11
cchannon
Impactful Individual
Impactful Individual

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.

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

secondImage

Demo Extravaganza Winner Announcement

Please join us on Wednesday, July 21st at 8a PDT. We will be announcing the Winners of the Demo Extravaganza!

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (2,935)