CODEWITHSUNDEEP
javascriptjqueryheightfancybox
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

Fancybox won't respect height

if I don't set the height of the box and leave it by default: the scrollbar is shown as the box is not big enough

enter image description here

$('#newsletter').fancybox({
    'type': 'iframe',
    'href': 'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
});

if I set it to 400:

enter image description here

$('#newsletter').fancybox({
    'type' : 'iframe',
    'href' :   'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
    'padding' : '20',
    'height' : '400'
});

(looks way bigger than 400)

also tried

$('#newsletter').fancybox({
    'type'              : 'iframe',
    'href'          :   'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
    'height' : '400px',
    'transitionIn'  :   'elastic',
},function(){$.fancybox.resize();});

which gives same result as first example

Upvotes: 2

Views: 1999

Answers (3)

Marc Uberstein
Marc Uberstein

Reputation: 12541

You can try using the public method resize, once content has been loaded, see method description :

*Auto-resizes FancyBox height to match height of content

Ref : http://fancybox.net/api

Method Usage : $.fancybox.resize();

What you can try :

    $('#newsletter').fancybox({
                        'type'          : 'iframe',
                        'href'          : 'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
                        'scrolling'     : 'no',
                        onComplete : function(){ $.fancybox.resize();}
                });

onComplete - Will be called once the content is displayed

Upvotes: 1

Umesh Patil
Umesh Patil

Reputation: 10685

  1. Sometimes, It occurs due to zoom.
  2. Can you try updating the 'height' : '400px'. It may works.

Upvotes: 0

undefined
undefined

Reputation: 34248

I think the issue you have here is actually inside the iFrame not fancybox. An iframe will not set its dimensions based on the size of the content within. my recommendation would be to avoid iframes as they are almost always problematic

Upvotes: 0

Related Questions