Problem with ConvertPlug modal popup: no scroll bar on mobile, content higher than screen

Support
#1

Hello, Wonderful Theme.co Support folks –

I’m using ConvertPlug to create a popup on this page [in section 2, click on “(click for more)”]:

https://receptivitylab.com/what-is-receptivity/

The popup looks good on larger screens, but on smaller screens the content ends up higher than the screen, and only the center shows. There is no scroll bar or any way to access the rest of the content.

(In the ConvertPlug Modal Popup Designer, switching to mobile view yields a popup with a scroll bar. But this is not how it appears live on an actual device, or when inspected on Chrome in mobile view.)

I tried adding the following CSS under Advance Design Options, but there was no change:

@media (max-width: 480px) {
.cp_id_7d613 .modal {
overflow: scroll;
}
}

Can you help me to get the popup to scroll in mobile view?

Thanks,
Marjorie

#2

Hi Marjorie,

Where did you add that CSS? I didn’t see it anywhere. Although when I inspect, the CSS should be this:

@media (max-width: 480px){
.cp-modal {
    overflow: scroll;
    max-height: 80%;
}
}

See this: https://screencast-o-matic.com/watch/cbQThiIOLb. Note that for scroll to work, we have to set height.

#3

Thanks so much, Lely - that did the trick! I needed the .cp- prefix for the element.

(I had taken out the CSS I put in earlier, since it had no effect.)

I’ve also added the following CSS to style the popup scrollbar, but unfortunately now on touchscreens the body of the page behind the popup will sometimes scroll instead of the popup text, unless your finger is directly on the scrollbar:

.cp-modal::-webkit-scrollbar {
width: 1em;
}

.cp-modal::-webkit-scrollbar-thumb {
background-color: #9cddda;
}

Is there a way to keep the page behind from scrolling while the popup overlay is open?

Thanks,
Marjorie

P.S. Thanks so much for the screencast, too!

#4

Hi Marjorie,

When the popup is open cp-mp-open class is added on html. We can use this class to disable the body content scrolling. After we close the popup, this class will then be remove so the scrolling on the body content will be available again.

.cp-mp-open body, .cp-mp-open {
    overflow: hidden;
}

See this: https://screencast-o-matic.com/watch/cbQOh2Iuh5

#5

I guess, I have the same problem with Modal Popup scroll. I have a form which is bigger than the screen on any screen height so I need the modal to allways being able to scroll.
I added:
.cp-modal {
overflow: scroll;
}
But it doesn’t work. Modal Popup isn’t scrolling.
Here’s the test page with a single button launching the modal: http://yellowrockets.com/asca-test/
Please help.

#6

Hi There,

I can see you have set height. Please add px to 300. See this: https://screencast-o-matic.com/watch/cbQteVIUDa

#7

Hi,
I don’t know what is setting this height especially with a mistake. In modal settings the height is set to auto and i have no styling in the code of the page.
https://gyazo.com/54edb3a77d99fa55dca9a0869447eba5
https://gyazo.com/ca93ad93d9c50708ba268286d266c5cb
I added css like this:
.cp-modal {
overflow: scroll;
height: auto !important;
}
Still no scrolling.
This bug appeared after I updated X Theme and ConvertPlus btw.

#8

Great, thanks Lely!

I also appreciate the detailed explanations you have given, rather than just supplying the css. This really helps me advance my css skills.

#9

Hi @moiseenkov ,

In this case, please open a new thread and then provide credentials on a secure note so we can investigate your setup and see where the issue is coming from.

You’re always welcome @marjorielk!