Get rid with horizontal margin or spaces from Modern Community Site Pages

SharePoint Online Modern communication site pages support section layout, named Full-Width column. It helps to span the section without any horizontal margin or padding.

In this article, you will learn the following,

1. Add Full-width Section.
2. Add Full-width support to SPFx Control.
3. Add SPFx Control to Full-width Section.

Users can choose from a number of different section layouts such as,

• one columns 
• two columns
• three columns
• one-third left column
• one-third right column

Full-Width Section Requirement

When we build a regular SPFx control, it doesn’t expand beyond a certain width due to section layouts which don’t support or allow the full width.

So, let’s get started

Step 1 - Add Full-Width Section

• Full-width section allows layouts to expand to the full width of the page.
• Edit the page
• Click the plus “+” icon parallel to the section layout and select the Full-width section.

Step 2 - Add Full-Width support to SPFx Control

SPFx control doesn’t add the full-width column property by default. But SharePoint Framework allows us to add full-width column attributes into the web part manifest file, i.e., GetEmployeeDataWebPart.menifest.json and adds supportsFullBleed property to true.

1. {  
2.   "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",  
3.   "id": "c58ad54b-0b32-4087-8b9b-5b28ded5e375",  
4.   "alias": "GetEmployeeDataWebPart",  
5.   "componentType": "WebPart",  
6.   
7.   // The "*" signifies that the version should be taken from the package.json  
8.   "version": "*",  
9.   "manifestVersion": 2,  
10.   
11.   // If true, the component can only be installed on sites where Custom Script is allowed.  
12.   // Components that allow authors to embed arbitrary script code should set this to true.  
13.   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f  
14.   "requiresCustomScript": false,  
15.   "supportsFullBleed": true,  
16.   
17.   "preconfiguredEntries": [{  
18.     "groupId": "5c03119e-3074-46fd-976b-c60198311f70",   
19.     "group": { "default": "Other" },  
20.     "title": { "default": "GetEmployeeData" },  
21.     "description": { "default": "GetEmployeeData description" },  
22.     "officeFabricIconFontName": "Page",  
23.     "properties": {  
24.       "listName": "SPFxList"  
25.     }  
26.   }]  
27. }  

Do the above one line setting. Build the bundle and deploy the solution.

Step 3 - Add SPFx Control to Full Width Section 

Browse the site and add a full-width section. The custom SPFx control will be available as per the below screenshot.

Click and add control. You can see that the custom control will take the full horizontal section and doesn’t allow margin or spaces.

NoteAs per today, the full-width column section doesn’t work with workbench and Modern Team Sites.

I hope you have enjoyed and learned something new in this article. Thanks for reading. Stay tuned for the next article.