I am developing a webpart for SharePoint and I have an annoying issue with my development environment for sharepoint Online. I have a blank space on the right. How can I fix it ? It's an unusable space that I cant' remove which it's present even when I generate a new project. I can't add webpart on it. And some webpart seems to pass under it. I make my webpart using ReactJS and the Office UI Fabric.

I already tried to reinstall but I still have the same issue.

I use IE11.

Could you help me ?

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import styles from './Graph.module.scss';
import { IGraphProps } from './IGraphProps';
import { escape } from '@microsoft/sp-lodash-subset';

import {
} from 'office-ui-fabric-react/lib/Image';

export default class Graph extends React.Component<IGraphProps, {}> {
  public render() {
    const imageProps: IImageProps = {
      imageFit: ImageFit.contain

    return (
      <div className={styles.testdiv}>
        <h1>Test d'image</h1>
          <Image {...imageProps as any} src="http://placehold.it/600x300" className={styles.test} alt="Example implementation of the property image fit using the contain value on an image wider than the frame." width={400} height={200} />

Blank space on sharepoint development environment

I should have that : enter image description here

And I have that : enter image description here

The space for the webpart doesn't take the full page, but it should be.

  • can you share some code ? Are you using the property pane correctly ? Apr 16, 2018 at 9:34
  • I didn't code anything yet for the pane property. I have this issue even with a blank projet and the default sharepoint component. I had my code. Apr 16, 2018 at 9:43
  • I try to add more explanations. If I am not clear enough could you tell on what point please. Apr 16, 2018 at 12:11
  • Could you try to remove the ' from your code? This starts is a multiline string.
    – Oskar
    Apr 17, 2018 at 10:23
  • @Oskar Sorry, I am not sure to understand. I don't see where I have to remove the ' . Apr 17, 2018 at 12:40

1 Answer 1


This is default IE11 behaivor of workbench page. Edge, Chrome displays it in the corerct way. When you put webpart in the real page the width will changes automatically.

The issue that it is not allowed to use different page layouts in the workbench except the bilt-in. According to SPFx roadmap workbench 2.0 is comming soon, I hope they will extend the functionality of it.

As workaround you can use mobile/tablet view.

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.