jQuery 1.4.2 resizable div stops working once it fits in browser window

Question

Hi all,

I have a 'toolbar' div that I made resizable via jQuery UI.

The weird thing is, I cannot drag the div unless the div is so long it extends past the viewable page, making the scrollbars appear. I can then drag the div anywhere I like. However, if I drag the div so it fits in the page without scrollbars, and I drop, I cannot resize it again (unless I make the page smaller so the scrollbars appear again!).

Here's the 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>

Here's the CSS:

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

Here's the jQuery:

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

Any ideas? The toolbar is located in an iFrame.

Answer 1

I'm not sure what the problem was exactly but I fixed the issue I was having.

I removed the div with id='toolbar' and added the ui-widget-header class to the 'toolbar_buttons' div, like so:

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

Now I can drag any time.