New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't get grid system working using office fabric ui react #4033
Comments
Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible. |
@simkessy Can you please share in addition the CSS/SCSS File you used too? |
Hi,
Me too, please can you let me know a fix / workaround. This is quite critical as we have a web part that heavily uses the ms-Grid layout Here is my package.json file: ` ` |
@StfBauer I just used what's generated by Yoeman. I later realized that I needed to use the Honestly, I think working with Fabric with SPFx isn't very clear or well documented. I've found myself having to do a lot of research to do something every beginner developer can figure out with Bootstrap / Material UI etc. |
Please could you post an example of how you got ms-Grid to render, I.e. what import statement did you use and a sample of your SCSS This was all working fine until I update to SPFX 1.8.2 |
@simkessy the documentation indeed could be improved, but there are also some things that I like to explain here. Office UI Fabric is somewhat like the first and foremost first third-party Framework that you may want to use in all your projects to create a seamless experience with the rest of the Office 365 platform. To apply the same CSS properties used by other classes you can call functions in SASS aka mixin. It is what happens, for example, in this class: .row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: while;
padding: 20px;
} That generates the following output: .helloWorld_2adf359f .row_2adf359f {
margin: 0 -8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: "[theme:white, default: #ffffff]";
background-color: while;
padding: 20px
}
.helloWorld_2adf359f .row_2adf359f::after,
.helloWorld_2adf359f .row_2adf359f::before {
display: table;
content: '';
line-height: 0
}
.helloWorld_2adf359f .row_2adf359f::after {
clear: both
} The hash at the end of the class names makes sure that one web part doesn't overlap style definitions of another web part on the page. By no means, this doesn't make your web part "Type-safe" because this is a "concept" by no means something CSS is aware. CSS only has a binary state attached. It works, or it doesn't work. To make use of the classes that got these predefined properties via the mixin. You always have to use in the React Control like this. <div className={styles.row}> This way, you build your grid base on the settings of the Office UI grid. This output the web part, for example, in this form. The black container is actually where the grid column gets assigned too. It is working in 1.8.2 by modifying the default provisioned web part with the following CSS. @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore';
.helloWorld {
.container {
// uncommented because of invalid display max-width: 700px;
//Before grid
//after grid
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
// background-color: $ms-color-themeDark;
background-color: while;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-xl6;
@include ms-xlPush3;
@include ms-lgPush3;
@include ms-lg6;
background-color: black;
@media screen and (min-width: 1024px) and (max-width: 1365px) {
background-color: lime;
}
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
} The workaround you did use .helloWorld {
:global{
@import 'node_modules/office-ui-fabric-react/dist/css/fabric.css';
} The downside of this approach is that you get everything from Office UI Fabric included not only the grid system. Besides those technical challenges, there are additional web design considerations to take into account using a grid in SPFx. Depending on where you place your web part on a page. The usage of the grid might be wrong. The result might look like this with multiple versions of a 12 grid on every web part, while grid systems should be used on a page but not in components such as a web part. I don't use a grid in web parts at all because of the known limitations. There are better options in the world, such as Flexbox and Grid Systems supported in CSS. Grid System right now not supported for IE11. |
@StfBauer Many thanks for your detailed explanation. Referring to your comments and taking a second look at my web part is trying to achieve, I agree that ms-Grid in the web part is not the best approach, and I will rewrite. As a quick fix I can confirm the following suggestion works
Many thanks again for your explanation. |
Closing issue as "answered". If you encounter similar issue(s), please open up a NEW issue. Thank you. |
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 |
Category
CSS classes aren't being applied to my app:
app.module.scss:
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
package.json:
component/tasks.tsx:
The text was updated successfully, but these errors were encountered: