Search code examples
javascriptjqueryheightfancybox

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

Solution

  • 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