Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

SPFX Full Bleed WebPart Tutorial

Really quick and simple hack to have a WebPart run Full Bleed (ie use all available space) within a Modern SharePoint Page.

I would suggest if you are going to use this in your own WebParts that you test thoroughly in your own environment, it is best suited for pages where you only want a single WebPart.

I have used jQuery to make life easier, although it should be fairly straightforward to do without needing to pull in a new project dependency.

It also goes without saying that this configuration is not supported by Microsoft at all. Use at your own risk.

Instructions

git clone https://github.com/littlejon/FullBleedWebPartTutorial.git
npm install
gulp serve

The Code

To test in your own WebPart. You will need jQuery installed the following to work

npm install jquery @types/jquery

Add include in your .ts or .tsx file

import * as jQuery from "jquery";

Simply add the following lines in the WebPart initialisation.

public onInit(): Promise<void> {
    return super.onInit().then(_ => {
        jQuery("#workbenchPageContent").prop("style", "max-width: none");
        jQuery(".SPCanvas-canvas").prop("style", "max-width: none");
        jQuery(".CanvasZone").prop("style", "max-width: none");
    });
}

About

SPFX Tutorial to have a WebPart run Full Bleed (ie use all available space) within a Modern SharePoint Page.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.