Forum Discussion

loksayi's avatar
loksayi
Copper Contributor
Jan 06, 2021

SPFx webparts issue when bootstrap is included

Hi Team,

We are having a issue with web parts that were developed with ReactJS/no javascript framework with Bootstrap 4 in our SharePoint online sites due to the out of the box elements using class row (which will have display:flex for class row in bootstrap 4). These web parts were working fine up to last month. After updates to the modern pages from microsoft, we are facing this issue now(Refer the image which has tiles that looks shrinked)

 

 

<div class="a_f_50a7110f a_f_50a7110f root-81 CanvasZone row CanvasZone--alignment CanvasZone--noMargin CanvasZone--read"
    data-automation-id="CanvasZone">

 

 


 When we override some of the out of the box classes through script editor, it works and looks fine as below :

It's also affecting out of the box web parts in the same page. Can someone please provide an solution/update on it ?

 

Regards,

Loksayi

are
  • loksayi's avatar
    loksayi
    Copper Contributor
    Jan 11, 2021

    Hello team,
    Any one able to replicate this issue from your end ? Any solution from Microsoft or Should we change override bootstrap framework in all our web parts ? Kindly provide an update.

    • nicolasvivier's avatar
      nicolasvivier
      Copper Contributor
      Mar 29, 2021

      loksayi I have solved the issue by inserting the following Css in my SPFX webpart:

      File: style.css

      File content

      div > div.CanvasZone--fullWidth > div {
        width: 100%;
      }
       
      Import the css file
       
      I have also tried to inject custom script via a dedicated webpart but it does not work. Css must be injected by your SPFX webpart

Resources