Forum Discussion
SPFx: Differences between full width page layout, single page app and single web part app page
Ah yes. Full width pages are only available for Communication sites as Team Sites currently have the left navigation.
Yes a full app page gives you the entire page layout (underneath the top nav bar/headings)
Deleted I'd like to start by saying that injecting code to override the out of the box styles is not supported and it's likely going to break in the future. Those class names used in the HTML change quite frequently.
The DOM is not an API and you shouldn't try to override it. To build full width pages, you'd have to build all of your web parts from scratch. Your options as below:
- A single web part app page
- A single part page is a way to build an app that controls the entire page (below the navigation)
- Cannot be edited or modified by end users
- Custom SPFx Web Parts set as full width
- You can create SPFx web parts that are set to "full width" and they show up when you use the out of the box "+" add a web part to page on a full width section
If your primary building block is going to be the react-script-editor web part (I don't really recommend), you can modify the *.manifest.json file in the SPFx solution to include "supportsFullBleed":true . This will allow the web part to show up in a full width section of an article page.
As noted, I don't 100% recommend using the script-editor web part, while functional, it takes away from some of the power of SPFx which is the ability have centralized control and management, CI/CD, etc... of your solutions. When using a script-editor web part, you are opening the doors to ill managed code to surface across your entire tenant.
Beau Cameron , thanks for elaborating on the topic. You confirmed what I've read already in that it's best to leave the DOM alone and not apply customizations of that kind - makes sense to me but as I'm not quite good at SPFx yet I was looking for a quick solution first.
Regarding a single web part app page. Am I correct in understanding that this will cover the entire page width without having to instantiate it on a page that supports the full page width layout?
I understand that another main difference is that it cannot be modified or edited by end users.
And if I used a Custom SPFx Web Parts with "supportsFullBleed":true" would I first need to convert the modern page so that it supports full page width layout?
Because as far as I can tell, only Communication Sites support that layout type at the moment. Article pages to not have this.Thanks.
Ah yes. Full width pages are only available for Communication sites as Team Sites currently have the left navigation.
Yes a full app page gives you the entire page layout (underneath the top nav bar/headings)
