Enable full width column for hosting SP List on a Site Page of modern site on SPO

[GulianiG]

Hi Community,

Can somebody please suggest as to how can i have a full-width column on a site page to allow for the full screen view for my SharePoint list on the page.

If you see below- my sample list "BRD" occupies the yellow highlighted portion only which is around 70% of the page width. Why can't i have a full width 100% screen dedicated to my SP list because SharePoint Online currently allows only 4 web parts highlighted in green below which doesn't help me for my list requirement. Please guide- thanks

Juan Carlos

[#2 · Accepted solution]

Hello,

There are two options to solve this:

1. Add SPFx web part for embeded code and manipulate the DOM to remove the max-width style for the specific area.

2. Create a SPFx web part to display the list and in the manifest, allow it to be shown as full width web part.

[#3]

@ArefHalmstrand Thanks for suggesting the probable solution. Would you know a video on YouTube or a webpage showing detailed steps on how to do this?

I am a SharePoint Administrator not a developer- so can try doing this if there is help with some reference material. Please suggest!

[#4]

I will try to find something that is safe and up to date. Could you concider voting the respons as best answer? :)

I am working on creating video content for community issues. If I dont find anything good then I can create a video for this scenario.

[#5]

https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor

Here is the first step. However, a developer needs to help out with deploying the application and adding the code.

Question: Do you want this to apply on one site, or all sites ? The current solution that I have suggested is based on deploying the code on a specific page. It is not ideal to add the code over and over again.

If it needs to be deployed everywhere, an SPFx extension is a better way to solve this.

[#6]

@ArefHalmstrand Thanks again.

I just need it on 1 site page- not on the whole site.

[#7]

Okay!

Let us take this conversation further through private message and MS Teams. :)

[#8]

@GulianiG What you're seeing is a function of your monitor size relative to the optimal screen size that the page is formatted for. You can see this exact mechanism at work if you go to your favorite retail website, such as Amazon or Best Buy. 

Open the website in a laptop or resize your browser to be approximately the size of a 13' laptop screen. Now, drag the window wider until it's the width of your screen. See how it fills the extra space on the sides with color bars? That space doesn't really exist on your page. It's just fill to account for your monitor being larger than what the page was optimized for.

SharePoint is doing the EXACT same thing. In a communication site like you've pictured, you'll see the excess fill space split left-right as you've shown. In a team site, the page will be left justified and and all the fill space will be on the right.

SharePoint does this to allow for the responsive design of the pages. The web parts with reconfigure and rearrange themselves to suit the size of your screen so the page looks good on a large monitor, laptop, tablet or phone.

I would not mess with it. You risk really messing up how your page works on other screen sizes. 

[#9]

Yes that is how responsive design works. However, removing the width limit is only going to make it better. The web parts will still adapt to the browser width and work as usual.

There is no reason to fear minor DOM manipulations. :)

[#10]

@ArefHalmstrand Thank you so much for confirming that.

Being able to have the widest screen possible irrespective of devices would make sense.

Because almost 40% users have extended monitor for display that is very large in comparison to our laptop screen users. And if this functionality can cater to both- nothing like it! Looking forward 

[#11]

@ArefHalmstrand - I am looking to accomplish this same request (adding a list WP to a full column width on a single page, on a single SPO site).  I was wondering if you could share the steps to implement this.  Thank you in advance for your time.

[#12]

@DB_22 Here's Microsoft official documentation to create a custom web part using SPFx with the full-width column: Use web parts with the full-width column 

---

Please consider giving a Like if my post helped you in any way.