Как настроить ширину fancybox2, когда она уже видна

Question

У меня есть fancybox, который отображается, когда пользователь нажимает кнопку.

У fancybox изначально есть 1 раскрывающееся меню, и в зависимости от того, что пользователь нажимает, отображаются различные элементы формы.Проблема в том, что fancybox достаточно широк для первоначального раскрывающегося списка, и в нем просто есть полосы прокрутки, как только элементы формы отображаются вместо изменения размера.

Как я могу изменить размер fancybox в этом сценарии?

$(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

Может быть, это будет работать для вас.Я устанавливаю размер fancybox, чтобы принудительно использовать auto для высоты и ширины.проверьте этот тест fiddle .

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

Вы заметите, что есть метод afterShow для имитации динамически добавляемого контента

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

это, вероятно,Лучшая ссылка для просмотра в действии