jQuery - Fancybox: But I don't want scrollbars!

Question

I am using jQuery Fancybox for a popup registration form here

I would like the form to come up at the size of 450px by 700px but no matter what I set the height and

Answer 1

I struggled quite a bit with this, only to find the answer within the Fancybox documentation.

As hinted above, first I thought it would have been as easy as this to disable scrolling:

$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})

Just setting the 'scrolling' option to 'no' was not enough, though. I had to repeat the same thing in the 'iframe' option, like this:

$('.fancybox').fancybox({
  'type': 'iframe', 
  'scrolling': 'no', 
  'width': 500, 
  'iframe': {'scrolling': 'no'}
})

Answer 2

I had I guess the same issue. It wasnt what the fancybox properties or CSS was, but the main css for my site.

if you have something like

div {overflow:auto;height:auto;} 

for a inheritable/root in your site css then it will cause scroll bar issues in the fancy box. Remove and make your HTML and CSS more precise with IDs and classes

Answer 3

on jquery.fancybox.js, I edited this part:

iframe : {

    scrolling : 'no', // i changed this from 'auto' to 'no'
    preload   : true
},

Answer 4

after testing every of the above tips (and still having useless scrollbars caused by some inline overflow: scroll at .fancybox-inner) and also trying a lot of other own workarounds, i got rid of the scrollbars with this solution:

    afterShow: function(){
        this.inner.css({
            overflow: 'auto' // or 'no'
        });
    }

Answer 5

Another alternative is to change the overflow:

body {
    overflow: hidden;
}

in your iframe's HTML.

Answer 6

I have face the same problem and after times of trial and error, I found out that you can avoid scrollbars by overriding frame css class.

You can do like this:

iframe.fancybox-iframe {
    overflow:hidden;
}

JS configuration:

jQuery(document).ready(function(){
    $("a.various").fancybox({
        'width'             : 'auto',
        'height'            : 'auto',
        'autoScale'         : false,
        'autoDimensions'    : false,
        'scrolling'         : 'no',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'  
    }); 
});

Note: Your fancybox box type must be an iframe for this to take effect.