Modern SharePoint pages support layouts that allow users to organize the information they present on their pages. Users can choose from a number of different section layouts such as two columns, three columns, or one-third column. Modern pages in communication sites offer an additional section layout named Full-width column. This layout spans the full width of the page without any horizontal margin or padding. SharePoint Framework web parts can be placed in any layout, but due to extra requirements, web parts must explicitly enable support for the full-width column.
By default Microsoft only supports Full-width column for Image and Hero Web part
Also by default, SharePoint Framework client-side web parts cannot be placed in full-width column layouts. To allow users to add your web part to full-width columns, in the web part manifest set the supportsFullBleed property to true.
refer Microsoft docs here
[code language=”javascript”]
{
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "34f6d7f2-262f-460a-8b65-152d784127cb",
"alias": "HelloWorldWebPart",
"componentType": "WebPart",
// The "*" signifies that the version should be taken from the package.json
"version": "*",
"manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"supportsFullBleed": true,
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "HelloWorld" },
"description": { "default": "HelloWorld description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "HelloWorld"
}
}]
}
[/code]
Problem:
I can’t insert my out of box web parts other than Image and Hero in a “Full-width column” of modern page. I need to load my Power BI web part in Full-width column to show as single page view, but it is not supporting. unable to find any solution from Microsoft.
Solution:
After lot of search, I tried to drag and drop to move the web part to different section.It works. Then I tried to move the web part to Full-width column section top left above the X sign. Then it works. Now I can load a web part looks like a Single page application without any custom code.
Without any issues it works well and I can now have any web part in the Full-width column section.
- Add your webpart in one normal section/column, then drag and drop in the Full-width column section, refer below image
- Refer below screenshot for output.
It works great! Please let me know in case if you found any issues or required any clarification.