Fancybox 2 scrollbar disapears and site shifts to the right

Question

I have a small issue with fancybox 2. I'm now to the coding stuff so sorry if I am going to ask stupid questions.

I got the fancybox working on the testsite but when I click on an image the box opens and the whole page in the background shifts to the right and the scrollbar disappears. I don't want this behaviour. The scrollbar should be there.

It is on this site: http://elgaucho.lu/restaurant.php

Can you help me please?

Thanks in advance

Andy

Answer 1

As far as I can tell, you modified the original fancybox css file.

You changed the line 167 from this

.fancybox-lock {
    overflow: hidden;
}

into this

.fancybox-lock {
    overflow: hidden;
    margin-right:0 !important;
}

... and the line 187 from this

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

into this

.fancybox-lock .fancybox-overlay {
    overflow: hidden;
    overflow-y: hidden;
}

... so no wonders (bear in mind that the js file also changes some css properties dynamically so you may not have full control just changing the css file)

Generally speaking you shouldn't mess with the original files unless you are pretty sure what you are doing, otherwise you will have unexpected results

Answer 2

I've solved this problem by adding the following code in the main CSS file:

body { margin: 0 !important; }
.fancybox-lock,
.fancybox-overlay { overflow: visible !important; }

Answer 3

I had the same issue... scrollbar disappeared and page shifted to the right. Annoying, but this code indeed works. Just add it to any of your fancybox css file (or any included css file for that matter).

.fancybox-lock, .fancybox-overlay { overflow: visible !important;}  

Answer 4

Force the page to always scroll with:

body {overflow-y: auto !important;}

Answer 5

I had this problem and my solution was easier than I expected it to be. I simply went into the html and noticed I'd had two body's

In the code (near the bottom) there is the following:

    body {
        max-width: 700px;
        margin: 0 auto;
    }

I deleted that and my website now went back to being centred.

Answer 6

added:

.fancybox-lock, .fancybox-overlay { overflow: visible !important;}
body {overflow: visible !important;}

removed:

.fancybox-lock body { overflow: hidden !important;}

fine