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

You need to put the iframe option in it's own context eg:

$(".someclass").fancybox({
    type : 'iframe',
    iframe : {
        scrolling : 'no'
    }
});

Answer 2

Add iframe: { scrolling : 'no' } as option

example

$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload   : true
}});

Answer 3

Edit line 197 and 198 of jquery.fancybox.css:

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

Answer 4

I had the same problem with fancybox and an iframe, googled for a solution and ended up here. The overflow: hidden did not work for me, however I found out that fancybox allows you to set the option for the iframe scrolling (equivalent to setting "scrolling=no" attribute on the iframe), which fixes the problem in IE7 in a more graceful manner:

$.fancybox({
    'type'        : 'iframe',
    'scrolling'   : 'no',
... and the rest of the parameters.

Answer 5

I had a similar problem, with vertical scrollbars appearing when I set a maxWidth in the Fancybox options.

To get around the problem I had to set

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

and set a fixed width CSS rule on the Fancybox content rather than specifying a maxWidth in the Fancybox options. If I did the latter, Fancybox's calculated height for the content was slightly too small - probably hinting at why it was putting in scrollbars in the first place.

Answer 6

This is the only thing that worked for me for both IE and Google Chrome, I think it's mostly because of the .body.scrollHeight stuff, which works in IE best. I put +30 for Firefox ...

jQuery.fancybox({
  href: href,
  type: "iframe",
  centerOnScroll: 'true',
  scrolling: 'no',
  width: 650,
  'onComplete': function() {
    jQuery('#fancybox-frame').load(function() {
      jQuery('#fancybox-content').height(this.contentWindow.document.body.scrollHeight + 30);
    });
  }
});