IFrameDialog Issue

[milindsaraswala]

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[ ] Enhancement

[x ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ v1.19.0 ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Observed Behavior

I am using IFrameDialog from PnP react control in my spfx project. I have use below code on anchor tag in table row. IFrameDialog opens properly on first time click on each row. but when I click second time on the same link than size of the IFrameDialog become very small.

<IFrameDialog
hidden={modalDialog.dialogHide}
url={href}
width={'1000px'}
height={'600px'}
onDismiss={() => setModalDialog({ dialogHide: true })}
modalProps={{ isBlocking: true }}
dialogContentProps={{
type: DialogType.normal,
showCloseButton: true
}}
/>

Thanks!

[ghost]

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

[milindsaraswala]

According to my test results, this should be a problem with this control.

My test result:

When we first open a dialog, the outermost div of the control will have such a piece of CSS code.

This CSS code disappeared when we closed the dialog and opened it again.

This control has a default max-width,so the dialog becomes smaller.

[holmesrm23]

Also experiencing this bug.

[AJIXuMuK]

Thank you @milindsaraswala for reporting the issue.
We will be working on fixing it.

In a meanwhile you can modify you code:

{!modalDialog.dialogHide && <IFrameDialog
  hidden={modalDialog.dialogHide}
  url={href}
  width={'1000px'}
  height={'600px'}
  onDismiss={() => setModalDialog({ dialogHide: true })}
  modalProps={{ isBlocking: true }}
  dialogContentProps={{
    type: DialogType.normal,
    showCloseButton: true
  }}
/>}

It will re-add the dialog each time when it should be displayed and will fix the issue.

[AJIXuMuK]

This one has been fixed and will be included in the next release.
In a meanwhile you can test the functionality in beta version