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>

Answer 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