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    lt script type  text javascript  gt        document  ready function                a regForm   fancybox                titleShow     false               autoscale    true               width      450                height      700                transitionIn      elastic                transitionOut     elastic                                    lt  script gt    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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Add iframe    scrolling    no    as option  example    fancybox   href   yourUrl html   width  800  height  415  autoSize  false  type    iframe   iframe    scrolling    no   preload     true

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Edit line 197 and 198 of jquery fancybox css    fancybox-lock  fancybox-overlay       overflow  auto      overflow-y  auto

User · Answer

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

User · Answer

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

User · Answer

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   amp  amp  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

User · Answer

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   amp  amp  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

User · Answer

on jquery fancybox js  I edited this part   iframe          scrolling    no      i changed this from  auto  to  no      preload     true

User · Answer

You need to put the iframe option in it s own context eg       someclass   fancybox       type    iframe       iframe             scrolling    no

User · Answer

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

User · Answer

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

User · Answer

Remove the quotes around your height and width values    lt script type  text javascript  gt        document  ready function                a regForm   fancybox                titleShow     false               autoscale    true               width     450               height     700               transitionIn      elastic                transitionOut     elastic                                    lt  script gt

User · Answer

Another alternative is to change the overflow   body       overflow  hidden      in your iframe s HTML

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to jquery

Examples related to fancybox