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

Using fancybox version: 2.1.5 and tried all of the different options suggest here and none of them worked still showing the scrollbar.

$('.foo').click(function(e){            
    $.fancybox({
        href: $(this).data('href'),
        type: 'iframe',
        scrolling: 'no',
        iframe : {
            scrolling : 'no'
        }
    });
    e.preventDefault();
});

So did some debugging in the code until I found this, so its overwriting all options I set and no way to overwrite this using the many options.

if (type === 'iframe' && isTouch) {
   coming.scrolling = 'scroll';
}

In the end the solutions was to use CSS !important hack.

.fancybox-inner {
   overflow: hidden !important;
}

The line of code responsible is:

current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));

Fancybox used to be a reliable working solution now I am finding nothing but inconsistencies. Actually debating about downgrading now even after purchasing a developers license. More info here if you didn't realize you needed one for commercial project: https://stackoverflow.com/a/8837258/560287

Answer 2

I know this sounds a bit weird but have any of you tried to set the margin of the form page body tag to 0.

The problem is actually pretty simple, the reason is that the body tag margin by default is set to 8px (depending on browser) and if you just set it to 0 then it fixes the scrollbar.

The js configuration I have is as follows and it works well without changing the css of fancybox.

$(".iframe").fancybox({
    'autoScale'         : false,
    'autoDimensions'    : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
});

Answer 3

$(".various").fancybox({
    fitToView   : false,
    width       : '100%',
    height      : '100%',
    maxWidth    : 850,
    maxHeight   : 550,    
    fitToView   : false,
    padding : 20,
    autoSize    : true,
    closeClick  : true,
    openEffect  : 'none',
    closeEffect : 'none',
    overflow : 'hidden', 

            scrolling   : 'no'
});

Answer 4

Just wanted to say Magnus' answer above did it for me, but for the second "overlay" that needs to be "overflow"

helpers : {
  overlay : {
    css : { 'overflow' : 'hidden' }
  }
}

Answer 5

I believe the solution to this is to set

'autoDimensions' : false

then the width and height for inline content would be as you set it to be

Answer 6

My 2 cents, write

*{ margin:0; padding:0; }

in your target page main css, add a content div with the height size of all your elements, don't touch the .js, listo, saludos