Lightbox Embedded Form: Elements with fixed position do not work.

  • Profile Image
    Asked on February 24, 2017 at 01:23 PM

    Thanks for the effort on this. I really appreciate it. Unfortunately the lightbox/feedback methods have other issues that I have also reported, most notably neither one will work properly with "fixed positioned" elements.

    To illustrate, create a button element on a lightbox form and add the following CSS for it so that it 'floats' above the form in a fixed position while you scroll - a.k.a. a "Checkout Now" button. It will work fine in the editor, but if you publish it as a lightbox or feedback widget, the fixed position, overlay elements do not work as expected.


    .form-buttons-wrapper {

        z-index : 99999 !important;

        position : fixed !important;

        top : 0 !important;

        padding : 0px !important;

        margin : 0px;


  • Profile Image
    Answered on February 24, 2017 at 02:04 PM

    I've been testing this and found what you're reporting, upon my findings I can see the CSS code is injected to the form and it indeed works, but the form is embedded in the lightbox container within an iFrame, this iFrame has the full height of the form so there's no scroll bar in the iFrame and the scroll bar actually belongs to the form's container. 

    Example, this is how the form currently works inside the lightbox container: 

    As you can see the iFrame takes the form's height, now if you use the iFrame code you're able to change the iFrame height, something that's not allowed with the lightbox code, so using the iFrame would work: 

    So I think that setting the iFrame's height the same as the lightbox container and allowing the scroll bar in the iFrame code would allow the fixed position to work properly. 

    I will forward this to our second level so our developers may implement this change, we  will let you know as soon as we get any update regarding this.