Utilising Office UI Grid with React based Sharepoint Web Parts

%3CLINGO-SUB%20id%3D%22lingo-sub-196847%22%20slang%3D%22en-US%22%3EUtilising%20Office%20UI%20Grid%20with%20React%20based%20Sharepoint%20Web%20Parts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-196847%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20been%20tying%20to%20utilise%20the%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fstyles%2Flayout%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EOffice%20UI%20Fabric%20responsive%20grid%3C%2FA%3E%26nbsp%3Bwith%20a%20React%20Sharepoint%20Web%20Part.%20It%20seems%20these%20are%20not%20fully%20compatible%2C%20as%20the%20breakpoints%20for%20the%20grid%20are%20browser%20width%20scoped%20and%20not%20Sharepoint%20column%20layout%20scoped.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20result%20of%20this%20is%20that%20the%20grid%20can%20be%20utilised%20in%20a%20web%20part%20if%20a%20single%20column%20view%20is%20used%20on%20a%20page%2C%20but%20not%20if%20multiple%20columns%20are%20used.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20this%20is%20correct%2C%20are%20there%20any%20alternatives%20to%20dealing%20with%20columns%20and%20layouts%20for%20the%20web%20parts%20that%20allow%20for%20scoping%20to%20the%20page%20columns%20rather%20than%20the%20browser%20width%3F%3CBR%20%2F%3E%3CBR%20%2F%3EI%20have%20attached%20two%20screenshots%20showing%20a%20single%20column%20view%20on%20mobile%2C%20with%20the%20grid%20working%20correctly%2C%20but%20an%20incorrect%20layout%20on%20desktop%20when%20multiple%20columns%20are%20used.%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-196847%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Efabric%20ui%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EReact%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EResponsive%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EWeb%20Parts%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
New Contributor

I have been tying to utilise the Office UI Fabric responsive grid with a React Sharepoint Web Part. It seems these are not fully compatible, as the breakpoints for the grid are browser width scoped and not Sharepoint column layout scoped. 

 

The result of this is that the grid can be utilised in a web part if a single column view is used on a page, but not if multiple columns are used.

 

If this is correct, are there any alternatives to dealing with columns and layouts for the web parts that allow for scoping to the page columns rather than the browser width?

I have attached two screenshots showing a single column view on mobile, with the grid working correctly, but an incorrect layout on desktop when multiple columns are used. 


0 Replies