IFrameDialog width issue

[Harshagracy]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

"@microsoft/sp-core-library": "1.9.1",
"@microsoft/sp-lodash-subset": "1.9.1",
"@microsoft/sp-office-ui-fabric-core": "1.9.1",
"@microsoft/sp-webpart-base": "1.9.1",
"@pnp/spfx-controls-react": "1.14.0"

Expected / Desired Behavior / Question

The width should always be the same whenever the iframwindow is opened.

Observed Behavior

The passed width is applied only on the first time opening the iframediaglog. Later the width changes to 323px for some reason.

Steps to Reproduce

Install the Iframedialog and use the below code:

import * as React from 'react';
import styles from './Iframe.module.scss';
import { IIframeProps } from './IIframeProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { IFrameDialog } from "@pnp/spfx-controls-react/lib/IFrameDialog";
import {
  DialogType
} from 'office-ui-fabric-react';
interface IIframeStates {
  isDlgOpen: boolean;
}
export default class Iframe extends React.Component<IIframeProps, IIframeStates> {
  constructor(props: IIframeProps, state: IIframeStates) {
    super(props);
    this.state = {
      isDlgOpen: false
    };
  }
  public componentWillReceiveProps() {
    this.setState({
      isDlgOpen: true
    });
  }
  private _onDlgDismiss(): void {
    this.setState({
      isDlgOpen: false
    });
  }

  private _onDlgLoaded(): void {
    console.log('dlg is loaded');
  }
  private opendialog(){
    this.setState({
      isDlgOpen: true
    });
  }
  public render(): React.ReactElement<IIframeProps> {
    return (
      <div className={styles.iframe}>
        <span className={styles.button} onClick={()=>this.opendialog()}>open iframe</span>
        <IFrameDialog
          url={"./workbench.html"}
          iframeOnLoad={this._onDlgLoaded.bind(this)}
          hidden={!this.state.isDlgOpen}
          onDismiss={this._onDlgDismiss.bind(this)}
          modalProps={{
            isBlocking: true
          }}
          dialogContentProps={{
            type: DialogType.close,
            showCloseButton: true
          }}
          width={'700px'}
          height={'315px'} />
      </div>
    );
  }
}

Please let me know how to fix it.

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

Hey @Harshagracy,
Could you please look at this example.
I just tested it and the dialog always respects the width.

[Harshagracy]

I got a workaround for my issue.

{this.state.isDlgOpen ? <IFrameDialog
          url={"./workbench.html"}
          iframeOnLoad={this._onDlgLoaded.bind(this)}
          hidden={false}
          onDismiss={this._onDlgDismiss.bind(this)}
          modalProps={{
            isBlocking: true
          }}
          dialogContentProps={{
            type: DialogType.close,
            showCloseButton: true
          }}
          width={'700px'}
          height={'315px'} /> : null}

[AJIXuMuK]

Great to hear that!
Feel free to close the issue, if it is resolved for you