jQuery 1.4.2 可调整大小的 div 一旦适合浏览器窗口就停止工作

Question

我有一个通过 jQuery UI 调整大小的“工具栏”div。

奇怪的是，我无法拖动 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

我不确定问题到底是什么，但我解决了遇到的问题。

我删除了 id='toolbar' 的 div 并将 ui-widget-header 类添加到 'toolbar_buttons' 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>

现在我可以随时拖动。