How to do I set fancybox minHeight and maxHeight?

Question

fancybox version: 2.1.0

description: I don't want to upgrade to version 3 because it will affect the others.

So how can the minHeight and maxHeight values be effective in the current version?

I tried the following method, but it didn't work.

//source code

$.fancybox.open({
            href: '#advancedSearchWrapper',
            maxHeight: 500,
            minHeight: 300,
            fitToView: true,
            autoSize: true,
            modal: true,
            autoScale: true,
)}

score -1 · Answer 1 · answered May 29 '18 at 08:58

To make minHeight and maxHeight options effective you need to set autoSize option to false.

$.fancybox.open({
  href: '#divContent',
  maxHeight: 150,
  minHeight: 100,
  fitToView: true,
  autoSize: false,
  modal: true,
  autoScale: true,
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fancybox@2.1.7/dist/css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fancybox@2.1.7/dist/js/jquery.fancybox.pack.js"></script>

<div id="divContent">
  Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
  Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content...
</div>

How to do I set fancybox minHeight and maxHeight?

1 Answers1