Support

Home Forums Wait List Manager Add-on Modal Issues

Modal Issues

Posted: March 13, 2019 at 8:00 pm


Michael

March 13, 2019 at 8:00 pm

Hi, I have an issue with the modal for the waiting list add-on. When I select the “join waiting list” button, the modal slides in, but it goes half way of the page height, not half way of the viewport. So, if my page is 2000px tall, and my viewport is 600px tall, it slides past the viewport to 1000px instead of centering in the viewport.

Please see this screen shot:

https://www.evernote.com/l/APfZOV_Ke4lLsp4Dd1TXB8yrGM16jmdn02g

Thank you!


Michael

March 18, 2019 at 10:19 am

Hi… following up. Thanks!


Josh

  • Support Staff

March 18, 2019 at 3:34 pm

Hi,

It might be half the viewport depending on the size of the viewport, but what’s actually happening there is the modal is being absolute positioned -225 pixels from the top of the Join Wait list button. What you could do is bump that value so it positions the modal further up the page. e.g. add this to your custom stylesheet:

.event_wait_list-hidden-inputs {
    top               : -500px;
    animation         : modal_drop .5s;
    -moz-animation    : modal_drop .5s; /* Firefox */
    -webkit-animation : modal_drop .5s; /* Safari and Chrome */
    -o-animation      : modal_drop .5s; /* Opera */
    -ms-animation     : modal_drop .5s; /* IE */
}
/* Animation Effects */
@keyframes modal_drop {
    from {
        top     : -600px;
        opacity : 0
    }
    to {
        top     : -500px;
        opacity : 1
    }
}

/* Firefox */
@-moz-keyframes modal_drop
{
    from {
        top     : -600px;
        opacity : 0
    }
    to {
        top     : -500px;
        opacity : 1
    }
}

/* Safari and Chrome */
@-webkit-keyframes modal_drop
{
    from {
        top     : -600px;
        opacity : 0
    }
    to {
        top     : -500px;
        opacity : 1
    }
}

/* Opera */
@-o-keyframes modal_drop
{
    from {
        top     : -600px;
        opacity : 0
    }
    to {
        top     : -500px;
        opacity : 1
    }
}

/* IE */
@-ms-keyframes modal_drop
{
    from {
        top     : -600px;
        opacity : 0
    }
    to {
        top     : -500px;
        opacity : 1
    }
}


Michael

March 18, 2019 at 6:35 pm

Thanks you!

The support post ‘Modal Issues’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for the Wait List Manager add-on for EE4. Documentation for the Wait List Manager add-on.

Status: closed

Updated by  Michael 22 hours, 21 minutes ago ago

Topic Tags

Notifications

This topic is: resolved
Do NOT follow this link or you will be banned from the site!