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 width at I get scrollbars:

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : '450',
            'height'  : '700',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

There must be something I am doing wrong but I can't figure out what it is. I would appreciate a helpful hand here. Thanks.

Answer 1

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 2

Sounds a bit wierd. an ugly solution is to use css, overflow:hidden;

Whenever I use fancybox, the scrollbars work correctly. sure that the content oc the fancybox is not setting another height?

Edit: Viewed your example-site. Seems like there is some width beeing set in the content that is larger than the fancybox itself.

Answer 3

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'}
})