jQuery 1.4.2 изменяемый размер div перестает работать, как только он помещается в окне браузера

Question

У меня есть div 'toolbar', размер которого я изменил с помощью пользовательского интерфейса jQuery.

Странная вещь в том, что я не могу перетащить div, пока div не будет настолько длинным, что он простирается за видимую страницу, заставляя появляться полосы прокрутки. Затем я могу перетащить div куда угодно. Однако, если я перетаскиваю div, чтобы он помещался на странице без полос прокрутки, и удаляю его, я не могу изменить его размер снова (если я не уменьшу страницу, чтобы полосы прокрутки снова появились!).

Вот HTML:

 <div class="Viewer">
    <div align="center">
        <div align="left" style="position:relative; width:100%; height:30px;">
            <div id="toolbar_buttons" class="ToolBar">
                <table>
                    <tr>
                        <td>
                            <button id="play">play</button>
                        </td>
                        <td>
                            <button id="stop">stop</button>
                        </td>
                        <td>
                            <div id="slider-vertical"></div>
                        </td>
                        <td style="width:30px;">
                            <!--<input type="text" id="amount" style="border:0; display:none; font-weight:bold;" />--> 
                            <span id="amount"></span>
                        </td>
                        <td>
                            <button id="btnScreenSizer">fit to screen</button>
                        </td>
                        <td>
                            <div id="status">status stuff goes here</div>
                        </td>
                    </tr>
                </table>

            </div>

            <div id="toolbar" class="ui-widget-header"></div>

        </div>
    </div>
</div>

Вот CSS:

#toolbar
{
    display:    none; 
    width:      300px; 
    height:     45px; 
    z-index:    -999999;
}

Вот jQuery:

$("#toolbar").resizable({
    handles: "se",
    maxHeight: 45,
    minHeight: 45,
    minWidth: 400
});

Есть идеи? Панель инструментов находится в iFrame.

Answer 1

Я не уверен, в чем именно проблема, но я исправил проблему, с которой столкнулся.

Я удалил div с помощью id = 'toolbar' и добавил класс ui-widget-header в 'div панели инструментов, вот так:

        <div id="toolbar_buttons" class="ToolBar ui-widget-header">
            <table>
                <tr>
                    <td>
                        <button id="play">play</button>
                    </td>
                    <td>
                        <button id="stop">stop</button>
                    </td>
                    <td>
                        <div id="slider-vertical"></div>
                    </td>
                    <td style="width:30px;">
                        <!--<input type="text" id="amount" style="border:0; display:none; font-weight:bold;" />--> 
                        <span id="amount"></span>
                    </td>
                    <td>
                        <button id="btnScreenSizer">fit to screen</button>
                    </td>
                    <td>
                        <div id="status">status stuff goes here</div>
                    </td>
                </tr>
            </table>

        </div>

Теперь я могу перетащить в любое время.