Scroll issue (convertplug modal)

Support
#1

Hi guys,

A while ago i contacted you about a scroll issue in convertplus. i write you again for a similar issue but this time the solution you provided me with before doesn’t really work.

I want to start by saying that i believe convertplus has actually heard you and fixed the scroll issue or at least it made it compatible with certain elements. while doing a research on what they did, it seems they added a jquery library called “perfect Scrollbar”.

Now here’s my problem, i added a Gravity form that is a bit bigger than the vertical viewport so it needs a vertical scrolling feature. convertplus detects this and does add a vertical scroll if i try to scroll down or even use the directional arrows on my keyboard (while the popup in is its :active state), the problem is that if i do not try to scroll down or press the down/up arrow, the scrollbar doesn’t appear.

my target is people who rely a lot on GUI (i.e: old people/people who do not work well with technology, etc) so i’d like to make this scrollbar visible.

i noticed that in the initial state of the scrollbar, its css has the following:

opacity:0
display:none

and then when the user scrolls changes to:
opacity: 0.6
display: block

but for the life of me, there’s something else i must be missing, because even while targeting the right classes, it just doesn’t change a thing, there must be something else that triggers that initial “show/hide scrollbar”

can you please help me out find the right class/target or even the JS that’s controlling it (i don’t think that applies here, though).

Thanks!

#2

Hello There,

Thank you for the very detailed post information. Please make use of this code instead:

body .ps> .ps__scrollbar-x-rail, .ps> .ps__scrollbar-y-rail{
   opacity:0.6 !important;
}

body .ps__rail-y{
   opacity:1 !important;
}

And make sure to clear your caches first before testing your site again.

#3

Unfortunately that didn’t work. could you please log in and check the code? i copy pasted it, it shouldn’t have any problem. i do not have caching enabled for logged in users, and out of precaution i flushed all caches. nothing.

#4

Hi there,

I compared your video on my test and I couldn’t replicate the same behavior. There is no scrollbar but the form is displayed in full-height. I tried it on the smaller device it’s the same. I also resized my desktop browser and still the same, the form is displayed in full-height (no clipping). What browser you’re testing it with? And what exact page?

Thanks!

#5

I’m using chrome con windows but i also tested it on safari, edge and explorer and got the same result.

I can only guess you have a big screen, the form doesn’t even fit entirely in my end (tested it on a 15" screen)

#6

Hi,

You can try adding this in Theme Options > JS

jQuery(function($) {
    $('.cp-modal-content').addClass('ps-active-y');
});

Hope that helps

#7

Unfortunately that doesn’t seem to change anything :frowning:

#8

Hi there,

I think I know now what’s happening, I tried many possible fixes and it’s not working.

The issue is, the scrollbar only appears when the user starts scrolling it. Hence, the CSS or Javascript will not work since the scrollbars aren’t present until scrolled. It’s not just opacity, but positioning and dimension. We could add static dimension but that means it’s not going to be responsive anymore. Its dimension is calculated through javascript on every scroll event.

But this CSS alone will make the scrollbar visible permanently, just after a user scroll it.

.ps-scrollbar-y-rail { opacity: 1 !important; }

Thanks!

#9

if we added a static dimension, to which class would we do it to (and how could it be done)? i’m only asking because if i know the classes that are triggered with the scroll, i might be able to find a workaround (and share it here if it works, of course)

is it only ps-scrollbar-y-rail? i still haven’t really figured out what does the scrollbar-y class does? they sort of seem to be the same thing.

#10

Hi,

If you would like to add a static dimension, you can add it to this class .cp-modal-content or .cp-modal

eg.

.cp-modal {
       max-width: 650px !important;
}

.cp-modal-content {
       height:500px !important;
}

You can check on this using google chrome developer tools.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.