How can I make fancyBox 2 adjust its height to fit its contents?

Question

I'm trying to get my fancyBox to expand in height when its contents are taller than the viewport. That way, the user scrolls its contents using the browser's scroll bar. Instead, my fancyBox keeps getting its own scroll bar.

I'm just using inline content, not an iframe. These are the options I set:

$('.fancybox').fancybox({
    autoSize: 'false',
    fitToView: 'false',
    maxWidth: 940
});

Adding scrolling: 'no' cuts off the content at the bottom. Explicitly defining a really tall height works, but I want the height to be determined dynamically.

Dextrous

Answer 1

Boolean and integer values should go without quotes so this

$('.fancybox').fancybox({
    autoSize: 'false',
    fitToView: 'false',
    maxWidth: 940
});

should be

$('.fancybox').fancybox({
    autoSize: false, // shouldn't be true ?
    fitToView: false,
    maxWidth: 940
});

fitToView is actually the option that gives you what you need but the quoted "false" didn't make it work for you. On the other hand, I am not sure you should disable autoSize because otherwise the inline content won't get its own height.

Indiscerptible

Wow, well that makes it super obvious I haven't the slightest clue what I'm doing. I greatly appreciate your polite, detailed response! – Dextrous

this is not working. the fancybox is keeping the height, but it's not adjusting its width based on the viewport. Is there any way to achieve that? (fluid width based on viewport but static height based on content)? – Farthing

@MattiaNocerino : First, you down-vote an answer that you don't understand and/or out of context. There is a difference between "this is not working" and "dunno how to make it work the way I want". Of course this (within the context of the OP) is working, otherwise it wouldn't have been accepted. – Indiscerptible

@MattiaNocerino : Second, regarding " it's not adjusting its width based on the viewport", that's not a requirement in the OP so your statement is (again) out of context. There is another answer where you can achieve that particular "fluid" width here https://mcmap.net/q/1623243/-can-fancybox-be-responsive-only-horizontally-for-tall-content – Indiscerptible

Answer 2

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.

Emersion

I see that's an answer copied and pasted directly from a question that was asked 3 years ago, awkwardly including an edit that's not applicable to my post (I didn't include an example page). – Dextrous

from there am solved my same problem dear friend that by i write same same thing here. – Emersion

Is it still relevant for the latest version of fancyBox? If so, to which element/class should I apply overflow: hidden? – Dextrous

when click to activate scroll bar just add the following code in your jQuery code $("body").css("overflow","hidden"); // hide body scrollbar and when close the fancybox add the following code $("body").css("overflow","auto"); – Emersion

I'm sorry, I don't quite understand what you mean. Do you think you can update your answer to have a full code block or link to a jsfiddle? I'm not very well experienced with jQuery yet, so that would help a lot. – Dextrous

Answer 3

Should anybody look for the solution for an iframe, use:

parent.jQuery.fancybox.update();

Autoionization