CODEWITHSUNDEEP
jqueryfancybox
Wordica
Wordica

Reputation: 2597

Fancybox 3.x.x have bug when somewhere on page div have min-height:100% property

I just can't fix this. When one div on page have attribute min-height:100%; after click on some element with fancybox class, image shows, but page jump in Y for height of childs of div with min-height:100%;

Example:

body{height:100%;}
html{height:100%;}

some_class{
    min-height:100%;
    background-image:url();
    background-size:cover;
    background-position:center center;
}

some_absolute_div_in_some_class{

     position:absolute;
     width:200px;
     height:200px;
     top:50%;
 }

And then I put some position:absolute div-s in some_class div.

Few div-s later when I build one page template, I put gallery with fancybox. And only when I remove min-height:100% for some_class - it works ok, with it whole page jump on Y asis after open fancybox.

Upvotes: 0

Views: 287

Answers (3)

Bicki
Bicki

Reputation: 11

In fancybox.css remove "height: auto;" from:

.fancybox-active {
    height: auto;
}

Upvotes: 1

Wordica
Wordica

Reputation: 2597

Solution for me when some div have min-height:100% :

beforeLoad : function(){

    jQuery('body').removeClass('fancybox-active').removeClass('compensate-for-scrollbar');
},

So I need to remove classes added by plugin for body.

Upvotes: 0

Janis
Janis

Reputation: 8769

Since you did not provide a link to live page/demo, I guess this is related to scrollbar hiding. You can disable that feature by setting hideScrollbar:false.

Upvotes: 0

Related Questions