Sp-dev-fx-controls-react: IFrameDialog - dimensions issue

[meerapan]

Need some help with controlling the height and width of IFrameDialog. I've created an SPFx extension that uses the IFrameDialog control as in the code sample- https://github.com/AJIXuMuK/SPFx/tree/master/iframe-dialog-example

Width and height attributes of the control have been set. CSS formatting is also applied. However, the width and the height of the dialog do not conform to the width, height specified in the control or CSS. Also get a warning(on bundling) about '.ms-Dialog-main'not being camel case - Warning - [sass] The local CSS class 'ms-Dialog-main' is not camelCase and will not be type-safe.

How can this issue with dialog dimensions be tackled? Please help.

[msftbot[bot]]

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

[AJIXuMuK]

Hi @meerapan
Do you use the example from my repo without any changes?
It uses old version of React Controls. The issue with dialog size has been fixed in 1.8.0.
So, you should be good with the latest version.

[meerapan]

@AJIXuMuK
I use the example, but updated React controls but still not able to control the dimensions of the dialog. Package.json now shows "@pnp/spfx-controls-react": "1.12.0".
Also included some business logic to my SPFX application customizer which basically injects html(anchor tag) into the top placeholder. The anchor tag 'onclick' invokes the ReactDOM passing some parameters as below.

private handleClick = (): void =>{
const element: React.ReactElement IframeDialog,
{
description: this.properties.description,
reportUrl:this.ReportUrl,
docCount: this.docCount
}
);

  this.testContainer = document.getElementById('testContainer');
  ReactDom.render(element, this.testContainer );

}

IframeDialog.tsx -

public render(): React.ReactElement {
return (

url={this.props.reportUrl}
iframeOnLoad={this._onDlgLoaded.bind(this)}
hidden={!this.state.isDlgOpen}
onDismiss={this._onDlgDismiss.bind(this)}
modalProps={{
isBlocking: true,
containerClassName: styles.container
}}
dialogContentProps={{
type: DialogType.close,
showCloseButton: true
}}
width={'800px'}
height={'800px'}
scrolling={'no'}
seamless={false}
allowFullScreen={true}
name = {'docFrame'}/>

);
}
private _onClick(): void {
this.setState({
isDlgOpen: true
});
$(".ms-Dialog-main").css({"max-width":"800px !important","width":"800px !important"});
$(".main ").css("max-width","800px !important");
$(".ms-Dialog-main").css({"max-height":"800px !important","height":"800px !important"});
$(".main ").css("max-height","800px !important");
$(".ms-Dialog-inner ").css("padding","0px");
}

[AJIXuMuK]

Could you please share your extension as a github repo? I’ll play with it. width should work. You don’t need to set styles in the code.

[meerapan]

Not sure if I can add it to a repo due to some concerns. How else can it can be done?

[meerapan]

Tried adding zip file. But it's bigger than what GitHub allows.

[AJIXuMuK]

You are correct. Width is not applied when the dialog is called from App Customizer.
The PR with fix has been created.

Also get a warning(on bundling) about '.ms-Dialog-main'not being camel case - Warning - [sass] The local CSS class 'ms-Dialog-main' is not camelCase and will not be type-safe.

I assume that you use ms-Dialog-main in your SCSS file. In that case SPFx warns you that such name is not type-safe. It's not a big deal.

Not sure if I can add it to a repo due to some concerns. How else can it can be done?

You have a Github profile, so you can create public repos with no issues.
I've added a sample of using IFrameDialog in App Customizer here

[meerapan]

Just browsed through the sample for App Customizer and noticed this import statement - import { DialogLauncher, IDialogLauncherProps } from '../../components/DialogLauncher'.
Where can I see '../../components/DialogLauncher' file?

[AJIXuMuK]

@meerapan
In src/components

[estruyf]

This fix has now been merged and will be available in the new release. You can already test it out by installing the latest beta version.

More information on how you can test out a beta version can be found here: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

[meerapan]

Appreciate the quick turnaround time. Thank you so much. It's been a lazy looooong weekend here in CA. Trying to test it out.

One quick question - can the dialog be set to resize dynamically based on the content within?