Office UI Fabric Layout Grid stop working in SPFx

[JackStrap]

Category

• Bug

Describe the bug

I'm working on a SPFx project, i was using the Grid system from Layout in Office UI Fabric i know it was working as of april 28, but now it's not rendering correctly. Here's a example of the code

<div className="ms-Grid" dir="ltr">
  <div className="ms-Grid-row">
    <div className="ms-Grid-col ms-sm1">A</div>
    <div className="ms-Grid-col ms-sm1">B</div>
    <div className="ms-Grid-col ms-sm1">C</div>
    <div className="ms-Grid-col ms-sm1">D</div>
    <div className="ms-Grid-col ms-sm1">E</div>
    <div className="ms-Grid-col ms-sm1">F</div>
    <div className="ms-Grid-col ms-sm1">G</div>
    <div className="ms-Grid-col ms-sm1">H</div>
    <div className="ms-Grid-col ms-sm1">I</div>
    <div className="ms-Grid-col ms-sm1">J</div>
    <div className="ms-Grid-col ms-sm1">K</div>
    <div className="ms-Grid-col ms-sm1">L</div>
  </div>
</div>

Steps to reproduce

Create a simple SPFx project, use React as FrameWork add this code to your WebPart

<div className="ms-Grid" dir="ltr">
  <div className="ms-Grid-row">
    <div className="ms-Grid-col ms-sm1">A</div>
    <div className="ms-Grid-col ms-sm1">B</div>
    <div className="ms-Grid-col ms-sm1">C</div>
    <div className="ms-Grid-col ms-sm1">D</div>
    <div className="ms-Grid-col ms-sm1">E</div>
    <div className="ms-Grid-col ms-sm1">F</div>
    <div className="ms-Grid-col ms-sm1">G</div>
    <div className="ms-Grid-col ms-sm1">H</div>
    <div className="ms-Grid-col ms-sm1">I</div>
    <div className="ms-Grid-col ms-sm1">J</div>
    <div className="ms-Grid-col ms-sm1">K</div>
    <div className="ms-Grid-col ms-sm1">L</div>
  </div>
</div>

Expected behavior

Should give you a Grid of 12 columns

Environment details (development & target environment)

• OS:
• Target Environment: SharePoint Online
• Framework: SPFx v1.10.0 - React - Office-ui-fabric-react
• Browser(s):
• Tooling: VS Code | SPFx v1.10.0 | Office-ui-fabric-react v6.189.2
• Additional details: Package.json
  "dependencies": {
  "react": "16.8.5",
  "react-dom": "16.8.5",
  "@types/react": "16.8.8",
  "@types/react-dom": "16.8.3",
  "office-ui-fabric-react": "6.189.2",
  "@microsoft/sp-core-library": "1.10.0",
  "@microsoft/sp-property-pane": "1.10.0",
  "@microsoft/sp-webpart-base": "1.10.0",
  "@microsoft/sp-lodash-subset": "1.10.0",
  "@microsoft/sp-office-ui-fabric-core": "1.10.0",
  "@types/webpack-env": "1.13.1",
  "@types/es6-promise": "0.0.33"
  },
  "resolutions": {
  "@types/react": "16.8.8"
  },
  "devDependencies": {
  "@microsoft/sp-build-web": "1.10.0",
  "@microsoft/sp-tslint-rules": "1.10.0",
  "@microsoft/sp-module-interfaces": "1.10.0",
  "@microsoft/sp-webpart-workbench": "1.10.0",
  "@microsoft/rush-stack-compiler-3.3": "0.3.5",
  "gulp": "~3.9.1",
  "@types/chai": "3.4.34",
  "@types/mocha": "2.2.38",
  "ajv": "~5.2.2"
  }

Additional context

Like i said, it was working as 28 April and i notice on May 14 it stopped working and it render like that:

You can also refer to those tickets:
#5745
#13112

I know that their is some work around like including in your scss file those lines
:global{
@import 'node_modules/office-ui-fabric-react/dist/css/fabric.css';
}
as mention by Stefan Bauer - SharePoint Framework and the Office UI Fabric grid system
but it was working before without this in your .scss file

Thanks for your contribution! Sharing is caring.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[rmbw74]

This happened back in November as well .. and was related to those ms classes for grid being directly used in the markup

you may want to try and apply the ms-SPLegacyFabricBlock class to the elements surrounding your grid

My Button elements are also now showing a Black Border around them

[JackStrap]

@rmbw74, Thanks for your reply, sorry but it didn't resolve the problem.

[mrcpgn]

Hi everyone,
I have the same problem.
If I set "loadLegacyFabricCss": true in the manifest, everything works BUT only in debug

[KevinTCoughlin]

Having .ms-SPLegacyFabricBlock by itself is not sufficient. That selector requires the Fabric stylesheet be loaded on the host page. The loading of that stylesheet on the host page is based on the following SPFx documentation:

• https://github.com/SharePoint/sp-dev-docs/wiki/SharePoint-Framework-v1.8-release-notes#deprecating-legacy-fabric-css-consumption
• https://github.com/SharePoint/sp-dev-docs/wiki/Safely-using-legacy-Fabric-Styles

Specifying loadLegacyFabricCss: true in a solution's manifest should cause the host page to request the legacy stylesheet named chunk.legacy-third-party-fabric-core.css.

@mrcpgn you mention that you've specified the manifest flag, but do not see the fix on the hosted page. Can you confirm the above mentioned stylesheet is not loaded in the "Network" pane?

@JackStrap can you confirm the same?

Here's the same issue that was resolved in Fluent UI repo: microsoft/fluentui#13112 (comment)

[KevinTCoughlin]

This happened back in November as well .. and was related to those ms classes for grid being directly used in the markup

you may want to try and apply the ms-SPLegacyFabricBlock class to the elements surrounding your grid

My Button elements are also now showing a Black Border around them

@rmbw74 I'll follow-up with the issue you're facing in #5764.

[mrcpgn]

legacy-third-party-fabric-core.css

Hi Kevin,
I have specified the flag but I don't see the fix and the css is not loaded.
In debugging (gulp serve) it works and I see that, unlike the hosted page, this js is loaded:

[JackStrap]

See my last response for more details

Hi Everyone,
@KevinTCoughlin, yes, if i specified the "loadLegacyFabricCss": true, in my manifest it works fine, in prod or in dev.(workbench) but since this seem to be deprecated(https://github.com/SharePoint/sp-dev-docs/wiki/SharePoint-Framework-v1.8-release-notes#deprecating-legacy-fabric-css-consumption).
So i don't recommend using this.

To solve this problem, i added a simple import in my script file(.tsx) like this:
import 'office-ui-fabric-react/dist/css/fabric.css';
Now everything works fine and, it even add the "ms-SPLegacyFabricBlock" in my rendering.

I will probably close this issue, cause it's working now.
But i would recommend to change the documentation, to tell people that they need to include the office-ui-fabric-react/dist/css/fabric.css in their solution.

Thanks

[KevinTCoughlin]

@JackStrap thanks for confirming. I've updated the above referenced release notes documentation to include your point.

Note that the selector ms-SPLegacyFabricBlock is appended because your manifest specifies loadLegacyFabricCss": true. The host app reads that and sets the selector on the web part root DOM Node.

[KevinTCoughlin]

@mrcpgn your issue seems similar to #5764. Can you provide information about your SPFx version in that issue? I am working on repros. Thanks.

[mrcpgn]

@mrcpgn your issue seems similar to #5764. Can you provide information about your SPFx version in that issue? I am working on repros. Thanks.

@KevinTCoughlin SPFx v1.10.0
I solved it by moving the style from the markup to the scss file

[pcostarg]

I have the same issue. I am working with 1.10.

I have not tried any of the solutions, but will try soon.

It just seems odd this kind of regression of the sudden. I know it was working as I deployed a few weeks ago to an Acceptance site collection and it was fine. When I was showing to some of the stakeholders, recently, some parts were broken without any further deploy.

[JackStrap]

Ok, more details on this issue.

After making more test, I realize that importing the fabric.css in your .tsx file doesn’t always work.
It works fine, if you run your webpart locally, meaning, you did your bundle and package without the –ship argument.
But, when you bundle and do your packaging with the –ship or –production switch, it stops working. Bizarre, like the fabric.css is not included in the package for production.

So, to solve this, I’ve included the fabic.css in the scss file of the project just below the import of the References.scss file.
@import '~office-ui-fabric-react/dist/css/fabric.css';

After that everything works fine in dev. or in production.

Thanks, everyone!

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues