Sp-starter-kit: Portal Footer: layout is broken

[dmitryrogozhny]

Category

• [ ] Question
• [x] Bug
• [ ] Enhancement

Expected or Desired Behavior

I want to use the Portal Footer extension on a site.

1. I've got the sp-starter-kit solution deployed in a tenant.
2. I've added only the Portal Footer extension to a site (no other extensions or web parts from the starter kit).
3. The portal footer is displayed correctly.

Observed Behavior

The layout of the footer is broken. All the columns are displayed one under another:

The reason for the problem is that the footer uses global CSS classes from Office UI Farbic for its layout ("ms-Grid", "ms-Grid-row"). In some cases these classes are not available and the layout breaks.

Note: this does not happen in every SharePoint Online environment though. I believe, that SharePoint Online loads Office UI Fabric CSS classes by default sometimes, but I haven't been able to find the documentation for that.

Steps to Reproduce

1. Add the Portal Footer to a site (e.g. add custom action with PowerShell).
2. Do not add any other extensions or web parts.

[msftbot[bot]]

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

[mag210]

I've noticed a similar thing in my tenancy. It's a workaround but you can force the footer to display correctly by adding this global to the top of the scss file:
:global{ @import 'node_modules/office-ui-fabric-react/dist/css/fabric.css'; }
See this thread: https://github.com/SharePoint/sp-dev-docs/issues/4033

[dmitryrogozhny]

@mag210, thank you for sharing the workaround!

I've added a PR #335 that should fix this problem for the portal footer.

The workaround will still be useful as this problem occurs in other components as well.

[eoverfield]

I too have seen this hit a few of my tenants over the past few weeks (post Ignite 2019), very random, and after possibly a day or two, all back to normal. Then the problem hits again. There is an OOTB SP component that loads default UI Fabric, which many devs then reference on the assumption it will be there, that seems to stop loading.

@VesaJuvonen is this an issue you can provide any insight into for us? Is there a known issue with SPO that is causing inconsistent loading of base UI Fabric css?

While @mag210 workaround should work, I recommend this only as a shim as it is bundling the entire fabric.css into your spfx solution, which could cause duplication and inefficiencies. The more safe workaround is to @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore';, then as @stfbauer stated here: https://github.com/SharePoint/sp-dev-docs/issues/4033#issuecomment-497682758, create your own grid, row, column classes that @include ms-Grid-row; for a row as an example. This will help you utilize Fabric safely without having to trust SPO to deliver this for you.

Also as a reference:
https://github.com/SharePoint/sp-dev-docs/issues/4037

[dmitryrogozhny]

@eoverfield Eric, thank you for an additional context and information.

Indeed, the only documented approach for using Office UI Fabric is by using mixins.
The quote from the Using Office UI Fabric Core and Fabric React in SharePoint Framework article from ms docs:

To achieve reliability, one of the main problems we need to solve is that of Global CSS styles. This accounts to not using global class names in the HTML markup and instead using Fabric Core mixins and variables in the Sass declaration file.

At the same time, SPO loads Fabric CSS (and sometimes does not) with some undocumented routine which leads to such an unexpected behavior.

[VesaJuvonen]

This issue is related on following oob issue - https://github.com/SharePoint/sp-dev-docs/issues/4911. There's work being done on addressing this properly and to fix the impact to 3rd party components.

[eoverfield]

PR merged. closing as addressed, thank you @dmitryrogozhny for the solution.