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.

Pistol

Answer 1

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.

Maryrosemarys

Answer 2

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.

Scientistic

This worked perfectly for me. Was seeing scrollbars in IE but not in Chrome. Thanks! – Saddlebow

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

Creese

This did the trick in fancybox 1.3.0. I think the answer is changing by the version number. – Forewing

It seems to be a lottery which solution works. For me it was this one. I have the feeling that bootstrap was part of the problem, but I don't care. This fixed it. – Dodder

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

Whoopee

This did the trick indeed. I feel like the accepted answer for this question is not the answer that people, who end up on this page, are looking for. – Sebiferous

Answer 5

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

Preparedness

This is the only thing that did it for me. – Frogman

This! I also like that this keeps the configuration within the fancybox options and doesn't require any additional CSS. – Sonnie

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.

Cromwell

Answer 7

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.

Tonie

Answer 8

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

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

Ganglion

Answer 9

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

Antisocial

Answer 10

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

Hodgkins

Answer 11

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

example

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

Zinfandel

Answer 12

Remove the quotes around your height and width values:

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

Dermatoid

Answer 13

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

Tenantry

Answer 14

Fancybox 2.x at least has an "overlay helper" which turned out to be the key for me. I added the following to my fancybox configuration parameters:

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

I had tried setting this in the CSS, but that didn't work, and late in the game, such as on the beforeShow event, but that led to a flickering bar. This seems to work without a hitch.

Brewhouse

It's overflow: hidden, not overlay.... – Alberta

Answer 15

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

iframe : {

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

Hennie

Answer 16

$(".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'
});

Wheelwright

Answer 17

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

Cerebration

Answer 18

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://mcmap.net/q/504963/-fancybox-2-new-license-closed

Airliah

Answer 19

Here is another thought. I had

html {  overflow-y: scroll; }

in my main CSS to prevent a centered content well from jumping around between pages that did or did not require a scroll bar. I tried all of the above to get rid of the scrollbar in the popup until I realized this. Once I turned it off for the popup only, the scrollbar in the popup disappeared as well. So, make sure that the scroll bar you are seeing is actually coming from the iframe and not from the page inside.

Racketeer

Answer 20

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

Madalene

Answer 21

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

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

Misconduct

Answer 22

I did this to get rid of the overflow (scrollbar) ...

by the end of the jquery.fancybox....js file there are onStart, onCancel, onComplete etc. functions, and they are all empty ... so just go ahead and fill into the curly brackets of onStart with "$('body').css('overflow','hidden')" and onClosed "$('body').css('overflow','visible')" ... should look like this ...

onStart:function(){$('body').css('overflow','hidden')},
onClosed:function(){$('body').css('overflow','visible')},

peace

Compensatory

Answer 23

The answers here offer many ways to potentially fix this issue, but most will not work for devices with touchscreens. I think the source of the problem stems from these lines of code from the source:

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

This seems to override any options set by the fancybox initial configuration, and can only be changed after these lines of code have run, i.e. changing the css using the afterShow method. However, all such methods will cause a noticeable delay/lag and you will be able to see the scrollbars disappear as you open it.

My suggested fix is that you remove these lines from the main source file jquery.fancybox.js around line 880, because I don't see a reason to force scrollbars onto devices with touchscreens.

Note that this won't immediately make the scrollbars disappear, it simply stops it from overriding the scrolling configuration option. So you should also add scrolling: 'no' to your fancybox initial configuration.

Newmint

Answer 24

Another alternative is to change the overflow:

body {
    overflow: hidden;
}

in your iframe's HTML.

Robledo