IFrameDialog scrolling doesn't seem to work with list item form and isDlg=1

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 6.13.4 ]

Expected / Desired Behavior / Question

I am using the iFrameDialog control in an SPFX development on SharePoint 2019 on prem. When I load a list form page using IsDlg=1 I and have set the scrolling property to ‘yes’ I expect that the dialog would load the page at the URL and if the content exceeded the size of the dialog specified by the length and width properties scrollbars would be shown.

Observed Behavior

The content returned exceeds the size of the dialog and no scrollbars are shown. Specifically the content is cut at the top (at the ribbon in the dialog).

Also, in the documentation the “seemless” property is noted as a string - in the interface a boolean is required. Additionally, the scrolling property is noted as being a string. What strings are acceptable? Is it expecting “yes”, “true”, “sure”. I think if yes or no this should be a boolean as well.

Steps to Reproduce

Add an IFrameDialog component to a project as below:

<IFrameDialog 
              url= {this.webURL + '/Lists/someList/DispForm.aspx?ID=13&IsDlg=1'}
              // iframeOnLoad={this._onIframeLoaded.bind(this)}
              hidden={false} // {this.state.hideDialog}
              // onDismiss={this._onDialogDismiss.bind(this)}
              scrolling={'yes'}
              modalProps={{
                  isBlocking: true,
                  className: 'customPNPDialog'                
              }}
              dialogContentProps={{
                className: 'customPNPDialogContent',
                type: DialogType.close,
                showCloseButton: true
              }}
              width={'600px'}
              height={'300px'}
            />

[AdiuTankT72]

Workaround for those without jQuery: iframeOnLoad={(iframe: any) => { const head = iframe.contentDocument.head; const css = ‘<style>.ms-dialog body {overflow: inherit !important;}</style>’; head.insertAdjacentHTML(“beforeend”, css); }}

[Matej4386]

I just found this closed topic - just to let others know. Workaround is: iframeOnLoad={(iframe: any) => { const head = $(iframe).contents().find("head"); const css = '<style>.ms-dialog body {overflow: inherit !important;}</style>'; $(head).append(css); } }