Convertplus modal scroll

[franticape]

Hello,

I’ve tried a few methods on my own and a few i saw in this forum but for the life of me i can’t get a CF form inside a convertplus modal scroll, i remember it used to scroll before (back when it was called CONVERTPLUG), could you help me out please?

so far the scroll is active but the form doesn’t scroll, would you care to give me a hand and a solution (if possible)

Thanks.

[ruenel]

Hello There,

Thanks for writing in! There is a known issue with ConvertPlus. To temporarily resolve this, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.cp-blank .cp-modal-body, 
.cp-modal-body.cp-blank{
    max-height: 100vh;
    overflow-y: visible;
}

body .cp-modal-content{
    max-height: 100vh !important;
    overflow-y: scroll !important;
}

Hope this helps. Please let us know how it goes.

[franticape]

Thanks, it works like a charm!

So this is actually a bug, then?

[rad]

You’re most welcome! And yes, and may also vary, you may use the given workaround for now.

[franticape]

Hey, what if i wanted to have one modal with overflow-y disabled (so it can’t scroll), let’s say this modal has a class #modal1, what css should i use to have every modal but this one with scroll enabled?

Thanks in advance.

[Joao]

Hi There,

You can try :

#modal1 .cp-blank .cp-modal-body, 
#modal1 .cp-modal-body.cp-blank{
       overflow-y: initial;
}

#modal1 body .cp-modal-content{
         overflow-y: initial!important;
}

If you need the code for the specific modal, point where we can check the specific modal, the given credentials do not work any longer,

Thanks

[franticape]

I tried a similar approach but with the class instead of an ID since i don’t know how to put an id on a convertplus modal (without JS, that is, but i think adding an ID with JS would be a huge overkill)

you can try the new credentials (left them in the message above your previous reply), the code is in the global css section.

[ruenel]

Hello There,

The convertPlus is using class and not ID. As an example, you may use this:

.cp-cp_id_33f85 .cp-blank .cp-modal-body, 
.cp-cp_id_33f85 .cp-modal-body.cp-blank{
       overflow-y: initial;
}

.cp-cp_id_33f85 body .cp-modal-content{
         overflow-y: initial!important;
}

wherein cp_id_33f85 is the class which you can find when you edit one of the modal popups.

Hope this helps.

[franticape]

Did you check the code that i wrote in the global css? it was exactly the one you just wrote here and it’s not working, unfortunately.

i also tried using the same CLASS as an ID (the last code i wrote) because i noticed that the shortcodes had the same class as in ID as well. it didn’t work either

by the way, the modal is called “homepage footer”.

P.S: I want to have all the modals but one (homepage footer) with the scroll-y enabled.

[ruenel]

Hey There,

Your code is missing .cp-. Please update it and use this:

/* Modal Fix */
.cp-cp_id_3b8ae .cp-blank .cp-modal-body, 
.cp-cp_id_3b8ae .cp-modal-body.cp-blank{
    max-height: 100vh;
    overflow-y: visible;
}

.cp-cp_id_3b8ae body .cp-modal-content{
    max-height: 100vh !important;
    overflow-y: scroll !important;
}

Please let us know how it goes.

[franticape]

i tried that before, and still doesn’t work

i tried using the following:

• .cp_id_3b8ae
• .cp-cp_id_3b8ae
• #cp-cp_id_3b8ae
• #cp_id_3b8ae

none of the above worked. i suppose it’s because the !important set before on the global modal css, i suppose that is not letting me override the code.

i also tried adding :not(.cp_id_3b8ae), :not (.cp-cp_id_3b8ae), :not(#cp_id_3b8ae) to the last element of the CSS in the global css code you gave me without any good results as well, the thing is here that i frankly don’t know where to put the :not() selector so i wouldn’t know if that would work.

[ruenel]

Hey There,

You may use this:

/* Modal Fix */
[data-modal-id="cp_id_33f85"] .cp-blank .cp-modal-body, 
[data-modal-id="cp_id_33f85"] .cp-modal-body.cp-blank{
    max-height: 100vh;
    overflow-y: visible;
    background-color: red !important;
}

[data-modal-id="cp_id_33f85"] .cp-modal-content{
    max-height: 100vh !important;
    overflow-y: scroll !important;
    background-color: green !important;
}

I added a separate background colors to easily spot which of the css will be applied to the page. You can remove the background color later on.

Please let us know how it goes.