Iframe size not initiated before content load

[tawgul]

Hi.

When you set up data-featherlight-iframe-width and data-featherlight-iframe-height it should take the size into account when the modal window appears not after the external content is loaded.. So first we have the size we want and then content loads in. The modal container could change the size at first to have the space required for iframe.

[alanef]

a loading attribute is supported

data-featherlight-loading='any html can go here'

without this you get the small modal before content is loaded

if you add appropriate html to loading you can create an appropriately sized modal

e.g.

data-featherlight-loading="<div style='width:400px;height:600px;text-align:center'> <img src='loading placeholder image'> </div>

Or similar html to meet your needs

[PhilippGrashoff]

I fixed this by defining the size of the Iframe using iframeStyle to add CSS via the style attribute of the iframe tag: data-featherlight-iframe-style="width:95vw;max-width:1200px;height:90vh;border-radius:4px"

If you want to pass it as configuration, its named iFrameStyle:

 {
        type:           'iframe',
        iframeStyle:    'width:95vw;max-width:1200px;height:90vh;border-radius:4px',
        iframeWidth:    '',
        iframeHeight:   ''
}

When adding CSS width and height, the Iframe has this size the moment it appears on screen.

[kevin-j-morse]

@PhilippGrashoff what did you do about the inital size of the modal?

Also have you noticed there are some inconsistencies between the sizing of the two stages of the featherlight box?

Even if I specify

iframeStyle: 'width:400px;height:600px;', loading: "<div style='width:400px;height:600px;'></div>",

I still see an abrupt transition when the iframe loads and the size of the box is changing.

[PhilippGrashoff]

@kevin-j-morse unfortunately I did not get a proper solution for that yet. I do not use any loading information and the change of size when the Iframe is completely loaded is not too much in my case. Yet, I would love to have a solution for that! I also move the closing Icon above the modal using CSS, but thats not causing the size change. If you have any point to start from, please tell me :)