Hi all,

on this site: http://www.the-mermaid.co.uk/__newsite/

 

If you click the enquire button (top nav in red) it brings up a fancybox iframe with a form inside - but on Firefox, there are scrollbars. In Chrome and Safari, there are no scrollbars!

 

 

I need it to be shown properly with no scrolls - any ideas? Why is this happening? It is doing my head in!!!

First thing you need to do is add

.fancybox-wrap {overflow:hidden}

 

@ line 8 of jquery.fancybox.css

 

Then figure out what's making the pop up a different size in firefox (is it a padding or margin issue?)

 

When you resize the browser you get the same scroll bar even in Chrome

Also, you need to allow ample room for the validation error you get if the form isn't filled out. Try in chrome and click send button without filling out the form

Hi all,

on this site: http://www.the-merma...o.uk/__newsite/

 

If you click the enquire button (top nav in red) it brings up a fancybox iframe with a form inside - but on Firefox, there are scrollbars. In Chrome and Safari, there are no scrollbars!

 

 

I need it to be shown properly with no scrolls - any ideas? Why is this happening? It is doing my head in!!!

 

Seems there's a bit of a bug in webkit browsers with FancyBox. Long story short, when FancyBox tries to calculate the height, in FF it gets what you can see in the viewport but in Chrome/Safari it gets the height of the entire document. Result of this is that it makes the height of the modal window a lot bigger in Chrome, hence no scrollbar.

 

There's a fix listed in this post:

http://stackoverflow.com/questions/2520107/jquery-fancybox-plugin-not-centered-in-safari-or-chrome-but-is-in-firefox

There's a fix listed in this post:

http://stackoverflow...t-is-in-firefox

 

Cheers mate - the function in Fancybox js is very different to the one listed on StackOverflow though... the only get viewport function I have is:

 

getViewport: function () {
  // See http://bugs.jquery.com/ticket/6724
  return {
   x: W.scrollLeft(),
   y: W.scrollTop(),
   w: isTouch && window.innerWidth ? window.innerWidth : W.width(),
   h: isTouch && window.innerHeight ? window.innerHeight : W.height()
  };
 },

 

Any ideas Spitfire?

Anyone else? Can anyone see the issue here?

 

Ok, Found a solution: http://stackoverflow.com/questions/10295746/fancybox-2-height-not-working

Edited August 6, 201214 yr by terydinho

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 frame for this to effect.

Ok, Found a solution: http://stackoverflow...ght-not-working

 

You forgot to upvote it - fixed that for you.

No its working fine. I think issue has been fixed.