Modal makes right page scroll disappear

[JustMikey]

When I open some long page that has a scroller on the right side of it and then I open the modal, the right scroller disappears and makes the whole webpage move right.

The right scroller gets hidden because of .custombox-open body applying overflow: hidden.

[dixso]

Hi, What browser and version uses?

[JustMikey]

Hello, I am using Google Chrome 46.0.2490.86 (64-bit) on Ubuntu. I don't think it is going hard to reproduce but if you can't, I will write detailed steps. Thank you for your time.

[JustMikey]

I apologize for misleading you but the problem is in something different. Plugin removes the right scrollbar and it adds right padding to the body so the body doesn't move and it's great but I also have a header which is fixed positioned and it does move, probably because fixed position simply ignores the padding that must compensate for the space that gets freed when the scrollbar disappears.

[dixso]

Hi, Is in this line: https://github.com/dixso/custombox/blob/master/src/js/custombox.js#L393

[JustMikey]

Yeah, I've added

html {
    ......
    overflow: visible !important;
}

body {
    .....
    overflow: visible !important;
    padding-right: 0 !important;
}

to fix my problem with the header and it works so far. Is there something that can break because of these additions to the code?

[dixso]

No :+1:

[Teppichratte]

I'm also having this kind of problem. My website has a big height and has a scrollbar at the right side of the browser (firefox, latest version). And when I open a modal window, then the scrollbar disappears and the whole website moves about 20 pixel to the right. When I close the modal window, then the website moves back to it's original position.

This problem is since today... after I updated to the current version of CustomBox. Before I was using v3.0.2 and this problem wasn't there.

[dixso]

Hi @Teppichratte, What operating system? Could you put an example in jsfiddle.net?

[Teppichratte]

It's Windows 10 Prof. 64 Bit.

Currently I'm short of time but you can also see the effect on your own website: http://dixso.github.io/custombox/ Go to "effects", hit the "demo" button for the "Fadein" effect and the page will jump about 1cm to the right. When you close the modal window, the page will go back to it's original position. It's because of the right scrollbar.

I have tested it with an older version (v3.0.2) of custombox and this effect wasn't there.

[Teppichratte]

This bugfix is also very important to us. With the refreshing/reloaded iframe bug (https://github.com/dixso/custombox/issues/188) this bug makes our website very ugly. We use your custombox very often so the page jumgs 1 cm to the right side and back (when you close the modal window) and refreshs the iframes all the time. We are already considering using another modal window jquery plugin but that would mean, we have to change a lot of code so we hope you can solve this issue soon. Thank you!

[Teppichratte]

BTW: It would be good to leave the scroolbar visible when custombox opens but the custombox background should overlay the scrollbar.

This framework works perfect in that sense: http://vodkabears.github.io/remodal

[Teppichratte]

@JustMikey When using your css code the jumping of the page is fixed but the vertical scrollbar is visible on the right side and it's shown in front instead behind the modal window overlay. Have you fixed this too?

[germanfleitasmodelit]

Yes, we have the same issue and as @JustMikey, we already have implemented on our site and change it for another modal could be too much work at this moment. If I have enough time I send you a PR with a posible fix. I Hope you can fix it.