Description
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.