0

I'm investing and trying out some of these components in my web part (classic page)

The Persona Card

https://developer.microsoft.com/en-us/fabric-js/components/persona/persona 

Ref below

https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css

https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css

https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js

And I assume they should be responsive but when I view them on my mobile phone they seem to keep overlapping other elements. Any ideas on how to fix this and how to override the CSS to make it work?

Thanks in advance

1 Answer 1

0

In order to get the Office UI Fabric to work in a classic page, there are some "tricks" you have to pull with renaming the .css files. Check out this thread.

11
  • Thanks William for that.I tried it but no luck by changing the filename.One problem i noticed though is some icons work some dont. For example <i class="ms-Icon ms-Icon--Vacation"></i> this doesn't work but this does <i class="ms-Icon ms-Icon--Phone"></i> Any ideas?
    – naijacoder
    Feb 3, 2020 at 2:08
  • All in took in my tenant was to make my own copy of the fabric.min.css and renamed to corpui.min.css in siteassets, then referenced the new file.
    – willman
    Feb 3, 2020 at 2:17
  • I'm not using the components.css, so you may have to do the same with that.
    – willman
    Feb 3, 2020 at 2:18
  • Thanks William but no luck..The ms icons work randomly. Can you provide the references fabric url you are using? Thanks
    – naijacoder
    Feb 3, 2020 at 3:15
  • /sites/pocsite/siteassets/corpui.min.css
    – willman
    Feb 3, 2020 at 3:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.