Forums

Content Block / Lightbox iframe problem - "Height" parameter not applying

Permalink 1 user found helpful
In the Content block - I have been trying to add a link to open an iframe lightbox. Everything works, except the Height parameter.
"Width" works - if I input 600px, it is 600px
However, Height is always scaled to to be a percentage of the Width.

I looked for the culprit and it seems to be

.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
This is in the core css.

This is a problem, because we should be able to define the Lightbox maximum Width and Height in the dialog box. Each use is different. You don't need as wide an iFrame for a form, as for a video.

It didn't do this in 5.3 - or at least I didn't notice. Why the change?
Can anyone think of a work-around?
arlenesey
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi arlenesey,

When you set the height and width, it is set as an inline style on the div that has the class of "mfp-content".
<div class="mfp-content" style="max-width: 600px; max-height: 600px;">
...
</div>

If you add "height: 100%" to this style in jquery-magnific-popup.css, the inline max-height takes effect. 
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; /*overridden by inline style*/
    height: 100%;
}

Because the lightbox CSS is used in other places where inline max-width/max-height styles are not used, it might be useful to add a max-height (500px seems to match the proportions of the lightbox without height: 100% set).
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; /*overridden by inline style*/
    height: 100%;
    max-height: 500px; /*overridden by inline style*/
}

As a temporary solution, you can add the above CSS to the Custom CSS.
https://www.concrete5.org/documentation/using-concrete5-7/in-page-ed...
arlenesey replied on at Permalink Reply
arlenesey
Thank you for your reply. Indeed, applying this in custom CSS on a per page basis is a good idea. I have implemented this and it works.

I guess what is confusing to me, is that the option to set the parameters is included in the lightbox-link dialog, but is not implemented.

Again, thanks for your work-around - saved my bacon!