Forum Discussion
Full Width in Modern SharePoint Team Site
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
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.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- 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
