fix of #636 - ability to set percent height to IFrameDialog

Author: AJIXuMuK

src/controls/iFrameDialog/IFrameDialog.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { Dialog, IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
+import { Dialog, IDialogContentProps, IDialogProps, IDialogStyleProps, IDialogStyles } from 'office-ui-fabric-react/lib/Dialog';
 import { IFrameDialogContent } from './IFrameDialogContent';
 import * as telemetry from '../../common/telemetry';
 import { Guid } from "@microsoft/sp-core-library";
 import omit from 'lodash/omit';
+import merge from 'lodash/merge';
+import { IStyleFunctionOrObject } from "office-ui-fabric-react/lib/Utilities";
 
 export interface IFrameDialogProps extends IDialogProps {
   /**
@@ -110,6 +112,7 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
     const {
       iframeOnLoad,
       height,
+      width,
       allowFullScreen,
       allowTransparency,
       marginHeight,
@@ -119,6 +122,7 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
       scrolling,
       seamless,
       modalProps,
+      dialogContentProps,
       className
     } = this.props;
 
@@ -127,11 +131,40 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
       onLayerDidMount: () => { this.setDialogStyling(); }
     };
 
+    const dlgContentProps = merge<IDialogContentProps, IDialogContentProps, IDialogContentProps>({}, dialogContentProps, {
+      styles: {
+        content: {
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        },
+        inner: {
+          flexGrow: 1
+        },
+        innerContent: {
+          height: '100%'
+        }
+      }
+    });
+
+
+    const dlgStyles: IStyleFunctionOrObject<IDialogStyleProps, IDialogStyles> = {
+      main: {
+        width: width,
+        maxWidth: width,
+        minWidth: width,
+        height: height
+      }
+    };
+
     return (
       <Dialog
         className={`${this.state.dialogId} ${className || ''}`}
+
+        styles={dlgStyles}
         modalProps={dlgModalProps}
-        {...omit(this.props, 'className', 'modalProps')}>
+        dialogContentProps={dlgContentProps}
+        {...omit(this.props, 'className', 'modalProps', 'dialogContentProps')}>
         <IFrameDialogContent src={this.props.url}
           iframeOnLoad={iframeOnLoad}
           close={this.props.onDismiss}

src/controls/iFrameDialog/IFrameDialogContent.module.scss

@@ -1,6 +1,7 @@
 
 .iFrameDialog {
     border: none;
+    height: 100%;
 
     .spinnerContainer {
         position: absolute;
@@ -9,4 +10,4 @@
         margin-left: -14px;
         margin-top: -14px;
     }
-}
+}

src/controls/iFrameDialog/IFrameDialogContent.tsx

@@ -28,7 +28,7 @@ export class IFrameDialogContent extends React.Component<IIFrameDialogContentPro
 
     public render(): JSX.Element {
         return (<div className={styles.iFrameDialog}>
-            <iframe ref={(iframe) => { this._iframe = iframe; }} frameBorder={0} onLoad={this._iframeOnLoad.bind(this)} style={{ width: '100%', height: this.props.height, visibility: this.state.isContentVisible ? 'visible' : 'hidden' }} {...omit(this.props, 'height')} />
+            <iframe ref={(iframe) => { this._iframe = iframe; }} frameBorder={0} onLoad={this._iframeOnLoad.bind(this)} style={{ width: '100%', height: '100%', visibility: this.state.isContentVisible ? 'visible' : 'hidden' }} {...omit(this.props, 'height')} />
             {!this.state.isContentVisible &&
                 <div className={styles.spinnerContainer}>
                     <Spinner size={SpinnerSize.large} />