Fluentui: Grid Layout Styles are Breaking since last 24 hours

[srujalsk]

Environment Information

• Package version(s): 7.111.1
• Browser and OS versions: Chrome, Windows 10

Please provide a reproduction of the bug in a codepen: https://codepen.io/srujalsk/pen/abvKPVJ

Actual behavior: Both the buttons are coming as stacked

Expected behavior: Both the buttons should be visible in a single row

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) Yes

Requested priority: (Blocking, High, Normal, Low) Blocking

Products/sites affected: (if applicable) Yes

[amanRAT]

There is an issue in rendering icons as well.

[chelobone]

We have the same problem in our project. Grid Layoyt stopped working yesterday.

The grid looks like this

And since yesterday, it looks like this

[aneeshack4]

@srujalsk The Grid utility hasn't had any changes in two months and even those were mass prettier/basecomponent/tslint deprecation changes. The most relevant change was made in January but that was about onBlur, not styles so I don't think this is a regression - there's most likely something on your end that you've updated.

I suggest using Stack in place of Grid. You can achieve what you're trying to do in your Codepen more easily if you just wrap in a Stack and set the direction to vertical. https://developer.microsoft.com/en-us/fluentui#/controls/web/stack

We're currently focused on larger work items in performance improvements and coherence so we'll likely not get to address this Grid issue in the near future, especially since there's a workaround and it's not a regression so I'm going to mark this as won't fix.

[srujalsk]

@aneeshack4 The codepen example was provided just for demo of non-working grid layout.

Stack control cannot be used for all use-cases, it cannot provide mobile responsive layout to my web application.

Please find below link showing the use case of Grid Layout in Office Fabric UI

https://developer.microsoft.com/en-us/fluentui#/styles/web/layout

We have been working with office fabric UI since really long time and we haven't faced any issue.

It was just since yesterday we have started facing broken grid layout issue in both version of office fabric UI i.e. 6.189.2 & 7.111.1

I doubt there is some serious issue with CDN's response, post yesterday's deployment. (which has caused this issue)

Requesting you to please help in fixing this issue.

Please help: @dzearing @ecraig12345 @micahgodbolt

[ecraig12345]

The ms-Grid classes come from Fabric Core, not the Grid utility component (that was built basically for a single specific purpose which is different from the ms-Grid responsive classes). The Fabric Core styles may have implicitly been included in Fabric/Fluent UI React in the past, but that must have changed recently. @dzearing is it possible that your changes to scss processing caused this?

In the meantime, you can work around this by manually adding a reference to the Fabric Core stylesheet in your app.

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"/>

[ecraig12345]

Actually I talked with @dzearing and he says we've never bundled Fabric Core with OUFR. (If you change to an older OUFR version in the codepen, it still doesn't work.) So it probably means something in your environment has changed.

I see from @chelobone's screenshot that you're working within SharePoint. @srujalsk and @amanRAT is that the case for you as well? If so, it's likely that SharePoint changed something such that the Fabric Core CSS is no longer loaded globally on the page.

[dzearing]

I'm not sure how that codepen ever worked. fabric core classnames like ms-Grid are only defined when you import the fabric core css stylesheet.

See documentation here:
https://developer.microsoft.com/en-us/fluentui#/get-started#fabric-core

When you add the link, it works as expected:
https://codepen.io/dzearing/pen/BaoPjoV

Can you see if you're importing the stylesheet correctly? And if so, check if the url is resolving? Perhaps a CDN outage happened.

[dzearing]

@chelobone Same thing as mentioned above; how is the fabric core stylesheet loading in your app? Is there a url that's no longer resolving, or, are you importing it through sass?

[ecraig12345]

Talked with @KevinTCoughlin who works on SPFx, and apparently the availability of the Fabric Core classes globally was actually a regression which was recently fixed by removing them again. Here's an excerpt from an email explaining the change, as well as links explaining how to load the styles yourself:

Starting with SPFx 1.8.0, we deprecated the default loading of legacy Fabric CSS styles. Customers could still opt into the load by changing their solution manifest to specify they still want the CSS loaded.

However, around November we rolled out a regression to this behavior and started always loading the legacy Fabric CSS styles again. We are checking in a fix which [apparently rolled out yesterday].

If a developer has an SPFx component developed with 1.8.0 or greater during this time frame, they may have unintentionally been dependent on the legacy Fabric CSS styles being loaded. Either the 1.8.0 release notes or the follow up documentation should enable customers to fix themselves.

Closing as external since this is not an issue with Fabric/Fluent UI itself.

[chelobone]

@dzearing @ecraig12345 Thanks to the both of you for your help! That was the problem. After importing de Stylesheet (it was not necessary before) it works perfectly!

[nsksaisaravana]

I have imported the stylesheet and it is working fine in the development environment but failing in the production environment. Please check the screenshot below. ms-hiddenXxlUp and ms-hiddenXlDown are not working in the production environment.

Mobile view and large screen css are not working.

<div class="ms-Grid-col ms-sm12 ms-hiddenXxlUp">Visible on smaller screens</div>
<div class="ms-Grid-col ms-sm12 ms-hiddenXlDown">Visible on larger screens</div>

[ecraig12345]

This is still an SPFx-specific issue, not an issue with Fabric/Fluent UI itself. You'll need to ask for help in some SPFx support forum or Stack Overflow, not here.

[srujalsk]

Thank You @ecraig12345 @chelobone @KevinTCoughlin Foy your help, I was able to fix this issue & deploy it to the production.

Thank You Once Again

[srujalsk]

@nsksaisaravana I did faced this issue, but solved it by upgrading my SPFx webpart version to 1.10 & including following import in root webpart component

import '../../../node_modules/office-ui-fabric-core/dist/css/fabric.min.css'

[chelobone]

@nsksaisaravana hi! in the render section, add this

{SPComponentLoader.loadCss('https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css')}

You have to import this

import { SPComponentLoader } from '@microsoft/sp-loader';

I hope this helps!

[nsksaisaravana]

@srujalsk @chelobone tons of thanks and it works like charm.

[pcostarg]

@ecraig12345 it might be it that the core styles were never bundled but then we have wrong documentation and with the bug, people built broken stuff, including from Microsoft own teams that did the documentation.

[ecraig12345]

@pcostarg Good catch--I'd recommend filing an issue at sp-dev-docs about that assuming it's still live. They're the ones who maintain that documentation.