How to adjust width of fancybox2 when it's already visible

Question

I have a fancybox that is shown when a user clicks a button.

The fancybox initially has 1 dropdown menu and depending on what the user clicks, different form elements are shown. The problem is the fancybox is only wide enough for the initial dropdown and it just has scroll bars once the form elements are shown instead of resizing.

How can I resize the fancybox in this scenario?

$(document).ready(function() {

        $('#clickme').fancybox();

        $('#substrate').change(function() {
            $this = $(this);

            if($this.val() != 'select') {


                if($this.val() == 'metal') {
                    console.log('$this = '+$this.val()); 
                    $('#ribConf').show();
                    $('#rust').show();
                    $('#fancyform').show();
                }

            } else {
                $('#fancyform').hide();
            }
        });

    });


<a id="clickme" href="#fancybox">click me</a>

        <div id="fancybox" style="display:none;">

            <p>
                <label for="substrate">Substrate</label>
                <select id="substrate" name="substrate">
                    <option value="select" selected="selected">-- Select --</option>
                    <option value="metal">Metal</option>
                    <option value="singleply">Single-Ply</option>
                    <option value="asphalt">Asphalt</option>
                </select>
            </p>

            <form id="fancyform" style="display:none;">

                <p>
                    <label for="squareFeet">Square Feet</label>
                    <input type="text" name="squareFeet" />
                </p>

                <p>
                    <label for="square">Square</label>
                    <input type="text" name="square" readonly="readonly"/>
                </p>

                <p id="ribConf" style="display:none;">
                    <label for="ribConf">Rib Configuration</label>
                    <input type="text" name="ribConf" />
                </p>

                <p id="rust" style="display:none;">
                    <label for="rust">Rust</label>
                    <input type="text" name="rust" />
                </p>

                <p id="waste" style="display:none;">
                    <label for="waste">Waste</label>
                    <input type="text" name="waste" />
                </p>

                <p><input id="submit" type="submit" value="Calculate"/></p>

            </form>
        </div>

Is this what you are looking for ? http://stackoverflow.com/questions/994876/jquery-fancybox-resize ; cheers — Tats_innit, Mar 15 '12 at 03:27
Not exactly because if i do this if($this.val() == 'metal') { console.log('$this = '+$this.val()); $('#ribConf').show(); $('#rust').show(); $('#fancyform').show(); $.fancybox.resize(); } It doesn't resize the fancybox and gives me an error. — Catfish, Mar 15 '12 at 03:30

score 1 · Accepted Answer · answered Mar 15 '12 at 06:00

1

Maybe this will work for you. I'm setting the size of the fancybox to force auto for both height and width. check out this test fiddle.

.fancybox-inner{width:auto!important; height:auto!important;}
.fancybox-outer{width:auto!important; height:auto!important;}

You'll notice that there's an afterShow method to simulate dynamically added content

afterShow: function(){
        $('.fancybox-inner').append('<br/><br/><br/> testing stuff</br>')
    }

this is probably a better link to view it in action

answered Mar 15 '12 at 06:00

Amin Eshaq

4,034
1
17
21

Does this work if the width needs to increase or just the height? Also, how did you get that full screen test in jsfiddle? – Catfish Mar 15 '12 at 13:31
both width and height should work. If you inspect the prewview elements in jsfiddle,and you;ll see a link to the iframe that renders the preview. that's the link – Amin Eshaq Mar 15 '12 at 15:39
Is there a way to re-center the fancybox after the new content is added? – Catfish Mar 16 '12 at 01:23
Ah i found it. calling $.fancybox.update(); re-centers the box. And just an fyi, with fancybox2, you need to add .fancybox-wrap to your css with the same attributes as you've added to inner and outer and it works perfect. – Catfish Mar 16 '12 at 01:42

How to adjust width of fancybox2 when it's already visible

1 Answers1