Problem using office-ui-fabric Panel with SPFx webpart on modern page

Question

I wrote a react based webpart that is displaying a panel on the right side of the screen using the Office UI Fabric React Panel component. The webpart works fine in the workbench.

However when deploying it to a modern page, the panel gets rendered inside the webpart container.Thus, displaying inside the page instead of the right side of the screen.

Workbench Result

Page Result

In my render method of my React Component, I do this:

public render(): React.ReactElement<IMyTasksProps> {
return (
  <div className={ styles.myTasks } >

    {
      this.state.loading &&
      <div className={ styles.container }>
        <div className={ styles.row }>
          <div className={styles.columnLoadingContent}>
            <Spinner size={SpinnerSize.large} />
          </div>
        </div>
      </div>
    }

    { !this.state.loading &&

      <div className={ styles.container }>
        <div className={ styles.row } onClick={this.onWebPartClick.bind(this)}>
          <div className={styles.columnMainIcon}>
            <Icon iconName="CheckList" className={iconClass} />
          </div>
          <div className={ this.state.myTaskItems.reduce((totalOpenTasks, taskItem) => totalOpenTasks + taskItem.props.openTasks, 0) == 0 ? styles.circleGreen : styles.circleRed }>{this.state.myTaskItems.reduce((totalOpenTasks, taskItem) => totalOpenTasks + taskItem.props.openTasks, 0)}</div>
          <div className={ styles.columnMainContent }>{escape(this.props.description)}</div>
          <div className={ styles.columnMainIcon }>
            <Icon iconName="ChromeBackMirrored" className={iconClass} />
          </div>
        </div>
        <div>
          <Panel type={PanelType.custom} customWidth="400px" isOpen={this.state.isOpen} onDismiss={this.onPanelClosed.bind(this)} >
            <h3>{escape(this.props.description)}</h3>
            <div className={ styles.myTasks } >
              <div className={ styles.taskContainer}>
                { this.state.myTaskItems
                    .sort((a,b) => (a.props.header > b.props.header) ? 1 : ((b.props.header > a.props.header) ? -1 : 0))
                    .map(taskItem => taskItem.render())
                }
              </div>
            </div>
          </Panel>
        </div>
      </div>
    }
  </div>
);

}

Any suggestions on what causes this behaviour?

Thanks in advance.

Answer 1

In the package solution, domainisolated was set to true which of course rendered the web part in an iframe. That explains the weird behaviour. Works like a charm now.

Answer 2

Are you using office fabric ui panel?

Works fine when I test in my environment.