Full Width in Modern SharePoint Team Site

[thoff830]

Hello 

We use modern SharePoint pretty much out of the box with some customizations. I understand that Full Width sections are really only supported in Communications sites and not team sites or pages. 

There must be a way around this. We have a need and requirement to utilize full width sections on our team sites, subsites, and pages. Any information on how to make this happen would be appreciated. SPFx, CSS changes, Templates and dev work? I cannot be the only Admin that has had this requirement. Has anyone out here successfully implemented this in any capacity on Team, Subsites, or pages?

Thank you

[#2]

@thoff830 out-of-the-box this can't be changed. CSS changes are not rtecommended by Microsoft as it might break something they roll out later. I don't know about SPFx as it's not allowed at our company. So, sorry, not much of a useful answer really.

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

[#3]

Hi @thoff830 

If you create a new SPFX webpart then you can display it using the full width of the screen.

You need to perform these steps:

1) Disable the Navigation on the left side: "Gear"->"Site Information"->"View all Site Settings"->"Navigation Elements". Then disable "Enable Quick Launch"

2) Creating a new "Full Bleed" SPFX Webpart. Create a new Webpart and set "supportsFullBleed" to true in manifest.json

3) In the same file add "SharePointFullPage" to the supportedHosts entry

4) Create a new App page that hosts your webpart:  Click new Page and select "Apps" and select your app

In the example below i created an Iframe webpart on a Teams site and added bing.com.

You would have to develop your whole application as that single webpart.

Best Regards,
Sven

[#4]

@Rob_Elliott Please explain this to me. I have a Team site in Sharepoint Indeed I cannot manually add a full-width section like the OP asked. However, if I create a new page, select the Visual page template, the new page has 2 included full-width sections with full width images. So it appears that the functionality is there but Microsoft does not provide the option. Why??

@thoff830 try to replicate this and see if you have the same result.

[#5]

@SvenSieverding 

Can you link to steps for creating a "Full Bleed" iframe web part. I googled a lot and did not find any results. Any help would be really appreciated, I need steps to create a full bleed iframe webpart. Or if you upload your web parts in a way so I can please import your webpart so I can use it in full width section in sharepoint online page that would be even better. Please check this and thank you in advance for your help.

[#6]

Hi @ySharif955 ;

Sure.... I created a sample at
https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-advanced-iframe

In order to have a webpart that can be added into a "Full-Width" section, you need to set the property "supportsFullBleed" to true in the manifest file  for the webpart
https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-advanced-iframe/src/webparts/advan...

Best Regards,
Sven

[#7]

Thank you very much for your explanation. However can you show step by step instructions on how to make your code into a SharePoint online webpart. I googled a lot but didn't find any good guide showing how to convert code into a SharePoint online webpart. I'm very new here and don't understand everything immediately. Any help would be really appreciated, Thank you 🙂

Also, one time I added a webpart to my SharePoint online, it was just few clicks only and there was no code and no GitHub needed, It was only you click few buttons and it added the new webpart to your SharePoint Online. Do you know this method it will be much better. Thank you for your time and effort

[#8]

@ySharif955 

I work at a company that creates a design add-on for SharePoint that offers this feature:

It might be out of your budget but just sharing it in case someone is looking to add advanced design capabilities such as full width sections on team sites and more to their SharePoint environment.

Here's our website: https://shortpoint.com
We're a Microsoft Gold Partner and you can see the long list of big names that are using our product for enhancing SharePoint.

All the best

[#9]

@ySharif955 did you manage to get the full width webpart at the end?

[#10]

@Harris0261 I used "enhanced powerapps" web part, it gave me ability to display powerapps applications in full width. I don't remember well but I don't think I used the information mentioned here to do this, I just took it from a different website as far as I remember.

[#11]

can you pls send me the link of where you get it?

[#12]

I don't remember where I got it from and I don't remember how I set it up to work sorry.

[#13]

Hello Everybody,

We had our custom SPFx web parts occupying the full width on a team site page (excluding the left navigation). But recently we observe that all the team site pages have a right side section leaving the web part cramped in the middle section. We have used "supportsFullBleed": true in the manifest file. Any idea why this could be happening suddenly?

[#14]

@Satheesh Vijayan I have noticed just in the last few days that Microsoft has made some changes to how modern pages are organized.  Controls that used to reside at the left side of the page now show up in a panel on the right.  It is possible this change is what has caused the issue with your custom SPFx web parts.  

Sadly, I do not  have the knowledge of how to fix it.