I am still exploring SharePoint Online creating webparts and deploying through visual studio code using Typescript.

I created a HelloWorld webpart and uploaded it on page. I was able to create package file, upload it on App-Catalog, install it and add to page.

Once it is on page its not taking whole page and in Page Layout section I am not able to see full width option.

As you can see from below screenshot, my webpart is in center of the page whereas What I want is It should be full-width, it should take over whole page.

And in Section layout, full width option is missing.

Can anyone suggest me or give me tip of how to create whole page webpart in SharePoint Online using SPFX.

enter image description here

enter image description here


Looks like you are using a Modern Team site, the full width column is currently available only for Communication Site.

To enable your webpart to full-width, you need to set the property "supportsFullBleed": true, in your webpart's manifest file. Also, you wont be able to test this webpart locally as full width section is not available on the workbench page.

References - Use web parts with the full-width column

How to add SPFx webpart to full-width column

Uservoice link - Full-Width Column Webpart available to Team Site Template

  • Thanks @gautam-sheth, That property is set to true. And the screenshot is of page not workbench. – salah9 Aug 24 '18 at 17:24
  • 1
    As mentioned, it is only supported on communication sites, wont work on Modern team sites – Gautam Sheth Aug 24 '18 at 17:25
  • any luck @salah9 ? did you try it on a communication site ? – Gautam Sheth Aug 28 '18 at 5:40
  • I tried adding same web-part to publishing site and it worked. – salah9 Sep 7 '18 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.