Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IFrameDialog - dimensions issue #303

Open
meerapan opened this issue May 16, 2019 · 11 comments

Comments

Projects
None yet
3 participants
@meerapan
Copy link

commented May 16, 2019

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

This comment has been minimized.

Copy link

commented May 16, 2019

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

@AJIXuMuK

This comment has been minimized.

Copy link
Contributor

commented May 16, 2019

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

This comment has been minimized.

Copy link
Author

commented May 17, 2019

@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 = React.createElement(
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 (


<PrimaryButton className={styles.button} text={'Test: ' + this.props.docCount} onClick={this._onClick.bind(this)} />


<IFrameDialog
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

This comment has been minimized.

Copy link
Contributor

commented May 17, 2019

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

This comment has been minimized.

Copy link
Author

commented May 17, 2019

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

@meerapan

This comment has been minimized.

Copy link
Author

commented May 17, 2019

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

AJIXuMuK pushed a commit to AJIXuMuK/sp-dev-fx-controls-react that referenced this issue May 17, 2019

@AJIXuMuK AJIXuMuK referenced this issue May 17, 2019

Merged

fix of #303 #305

@AJIXuMuK

This comment has been minimized.

Copy link
Contributor

commented May 17, 2019

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

This comment has been minimized.

Copy link
Author

commented May 18, 2019

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

This comment has been minimized.

Copy link
Contributor

commented May 19, 2019

@meerapan
In src/components

estruyf added a commit that referenced this issue May 20, 2019

@estruyf

This comment has been minimized.

Copy link
Collaborator

commented May 20, 2019

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/

@estruyf estruyf added this to the 1.13.2 milestone May 20, 2019

@meerapan

This comment has been minimized.

Copy link
Author

commented May 21, 2019

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.