4

I've created an spfx webpart using the react-office-ui-fabric DetailsList. It works fine, but the details list is quite wide. On a modern page the framework is rendeing my webpart in a div that is set to max-width 1280ox which causes a horizontal scroll bar to appear. enter image description here

It seems to do that for all webparts. Is there a way to override the max-width on a modern page? Works fine on a classic page/

  • Since you say it works on Classic, do you mean your CSS (injected via your SPFx WebPart) is not applied? – Danny '365CSI' Engelman Mar 30 '17 at 8:17
  • No, I am saying that Modern pages display webparts in a div with the max-width set to 1280 px. – russellg Mar 30 '17 at 12:24
  • Hey russell, Did you got any solution for this issue. I am facing same issue – Bharat Khunti Sep 27 '17 at 14:18
  • No, I never did. sorry – russellg Sep 27 '17 at 20:29
  • But the Preview button on the new workbench works well, so I dont really need it anymore – russellg Oct 6 '17 at 14:05
1

If you increase CSS Specificity you can set your own max-width:

.Canvas.Canvas{
    max-width:initial;
}

or

.Canvas.Canvas{
    max-width:100vw;
}

See: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

  • Is it good idea to increase the canvas size to 180 vh? from the webpart css – Student Apr 12 '18 at 15:57
0

you could use a script Editor for modern pages form bitalus.com in example and input:

<style>
   .Canvas{
       max-width:100% !important;
   }
</style>

this is working for me like a cham!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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