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.
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.