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");
    });
}