0

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.

Gerry
  • 11
  • 2

2 Answers2

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.

Gerry
  • 11
  • 2
0

Are you using office fabric ui panel?

Works fine when I test in my environment.

enter image description here

Lee
  • 5,305
  • 1
  • 6
  • 12
  • Hi Lee, I am using the Panel [Office Fabric UI React 6](https://developer.microsoft.com/en-us/fluentui?fabricVer=6#/controls/web/panel). It seems that the Office UI Fabric styles are not loading, since the font in the main part is also different. Would you be so kind to share your example with me so I can see if there are any differences? Thanks – Gerry Jun 30 '20 at 08:44
  • Published my test project https://github.com/OS-Lee/OfficeFabric – Lee Jun 30 '20 at 08:55
  • Thanks Lee! Meanwhile I have found the issue: 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. Thanks for your assistance! – Gerry Jun 30 '20 at 09:37