reactjstypescriptsharepointspfx

How do I fill the width of the web part into full screen width in SPFx 1.10?


I installed SharePoint framework SPFx 1.10 with React template, ran on https://localhost:4321/temp/workbench.html and tried to insert "supportsFullBleed": true in the "WebPartName.manifest.json" file but it did not extends the width.

Also, I commented the SCSS import library and the HTML template code:

import * as React from 'react';
// import styles from './TestSpfx.module.scss';
import { ITestSpfxProps } from './ITestSpfxProps';
import ItemListAPI from './ItemListAPI';

export default class TestSpfx extends React.Component<ITestSpfxProps, {}> {
  public render(): React.ReactElement<ITestSpfxProps> {
    return (
      <div>
        <ItemListAPI />
      </div>
      // <div className={styles.testSpfx}>
      //   <div className={styles.container}>
      //     <div className={styles.row}>
      //       <div className={styles.column}>
      //         <span className={styles.title}>Testing Fluent UI</span>
      //         <ItemListAPI />
      //         {this.props.description}
      //       </div>
      //     </div>
      //   </div>
      // </div>
    );
  }
}

But the result was still the same. Anyone know how to fill the web part into full screen width?

enter image description here


Solution

  • Use this link: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/use-web-parts-full-width-column

    Read the note at the end of the page. Workbench doesn't support testing web parts in the full-width column layout. Instead, you will have to deploy your web part to a developer tenant, create a communication site, and test your web part there.