Forum Discussion
Full Width in Modern SharePoint Team Site
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
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 entry4) 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,
SvenSvenSieverding
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.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/advancediframewebpart/AdvancedIFrameWebpart.manifest.json
Best Regards,
Sven
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)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.
