Fix for #118

pnp · Sep 7, 2018 · 3c8016b · 3c8016b
1 parent 58a25c7
commit 3c8016b
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 10 deletions.
diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON
@@ -10,7 +10,9 @@
           "`WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)",
           "`ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)"
         ],
-        "fixes": []
+        "fixes": [
+          "`IFrameDialog`: dialog width is not correct in IE11 [#118](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/118)"
+        ]
       },
       "contributions": ["Thomas Lamb", "Joel Rodrigues", "Mikael Svenson"]
     },

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@
 - `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)
 - `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)
 
+**Fixes**
+
+- `IFrameDialog`: dialog width is not correct in IE11 [#118](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/118)
+
 ## 1.7.0
 
 **Enhancements**

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -9,6 +9,10 @@
 - `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)
 - `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)
 
+**Fixes**
+
+- `IFrameDialog`: dialog width is not correct in IE11 [#118](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/118)
+
 ## 1.7.0
 
 **Enhancements**

diff --git a/src/controls/iFrameDialog/IFrameDialog.tsx b/src/controls/iFrameDialog/IFrameDialog.tsx
@@ -3,6 +3,8 @@ import * as ReactDOM from "react-dom";
 import { Dialog, IDialogProps } 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 = require('lodash/omit');
 
 export interface IFrameDialogProps extends IDialogProps {
   /**
@@ -24,6 +26,7 @@ export interface IFrameDialogProps extends IDialogProps {
 }
 
 export interface IFrameDialogState {
+  dialogId: string;
 }
 
 /**
@@ -35,19 +38,55 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
     super(props, state);
 
     telemetry.track('IFrameDialog', {});
+
+    this.state = {
+      dialogId: null
+    };
+  }
+
+  /**
+   * componentWillMount lifecycle hook
+   */
+  public componentWillMount(): void {
+    this.setState({
+      dialogId: `dialog-${Guid.newGuid().toString()}`
+    });
+  }
+
+  /**
+   * componentDidMount lifecycle hook
+   */
+  public componentDidMount(): void {
+    this.setDialogStyling();
+  }
+
+  public componentDidUpdate(prevProps: IFrameDialogProps, prevState: IFrameDialogState): void {
+    this.setDialogStyling();
   }
 
   public render(): JSX.Element {
     return (
-      <Dialog
-        {...this.props}>
-        <IFrameDialogContent
-          url={this.props.url}
-          iframeOnLoad={this.props.iframeOnLoad}
-          close={this.props.onDismiss}
-          width={this.props.width}
-          height={this.props.height} />
+      <Dialog className={`${this.state.dialogId} ${this.props.className}`}
+              {...omit(this.props, "className")}>
+        <IFrameDialogContent url={this.props.url}
+                             iframeOnLoad={this.props.iframeOnLoad}
+                             close={this.props.onDismiss}
+                             width={this.props.width}
+                             height={this.props.height} />
       </Dialog>);
+  }
 
+  /**
+   * Set the dialog style
+   */
+  private setDialogStyling(): void {
+    if (!this.props.hidden && this.state.dialogId) {
+      const element = document.querySelector(`.${this.state.dialogId} .ms-Dialog-main`) as HTMLElement;
+      if (element && this.props.width) {
+        element.style.width = this.props.width;
+        element.style.minWidth = this.props.width;
+        element.style.maxWidth = this.props.width;
+      }
+    }
   }
 }
diff --git a/src/controls/iFrameDialog/IFrameDialogContent.tsx b/src/controls/iFrameDialog/IFrameDialogContent.tsx
@@ -36,4 +36,4 @@ export class IFrameDialogContent extends React.Component<IIFrameDialogContentPro
 
         this._iframe.style.visibility = 'visible';
     }
-}
+}