5

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

2 Answers 2

4

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

5
  • Thanks @gautam-sheth, That property is set to true. And the screenshot is of page not workbench.
    – salah9
    Aug 24, 2018 at 17:24
  • 2
    As mentioned, it is only supported on communication sites, wont work on Modern team sites Aug 24, 2018 at 17:25
  • any luck @salah9 ? did you try it on a communication site ? Aug 28, 2018 at 5:40
  • I tried adding same web-part to publishing site and it worked.
    – salah9
    Sep 7, 2018 at 14:30
  • @GautamSheth , for out of the box webpart e.g listview -how can we support full width with Teams site? its limitation?
    – Anuja
    Apr 29, 2021 at 13:17
0

just install modern script editor web part

enter image description here

then insert CSS:

<style type="text/css"> 

#spLeftNav {
    display: none;
}
#spPageCanvasContent {
  margin: auto;
  width: 75%;
} 
    
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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