sharepoint-onlinespfx

How to identify in code that webpart is used full-width in SPFx

Currently i'm able to create webpart in SharePoint that is allowed to use in full-width mode(manifest:"supportsFullBleed": true). But i need to change some styles accordingly. Is there any way how to identify that webpart is used full-width in code? SPFx used: 1.15.2

I tried check of width of element, it works in some cases, but when full-width webpart is used in for example mobile than width its not reliable.

Solution

  • While not a supported method, I have found that full-width sections have a css class of CanvasZone--fullWidth, while normal sections do not.

    enter image description here

    This means that within your web part, you can query the dom tree for a parent with this class. If it finds one, then your web part is in a full-width section.

    For example, in webpart.onInit:

    const fullWidth = this.domElement.closest(".CanvasZone--fullWidth") !== null;

    Similar technique can be used to detect if the web part is in a vertical section

    const isVertical = this.domElement.closest(".CanvasVerticalSection") !== null;