Search code examples
javascriptjquerycssjquery-ui-resizable

Using jQuery Resizable Helper on a Dialog

How can I use the Helper functionality from jQuery Resizable (which only displays a frame while the container is resized) on a Dialog?

Solution

  • This answer explains how to achieve what you are looking for. Here's a working jsFiddle.

    The answer has one flaw: the resize handle goes underneath the dialog if it is being shrunk. This is solved through z-index: 10000 !important;. The jsFiddle linked here includes the fix.

    HTML:

    <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

    CSS:

    .ui-resizable-helper {
    border: 2px dotted #00F;
    z-index: 10000 !important;
}

    JavaScript:

    $("#dialog").dialog().dialog('widget').resizable('destroy').resizable({
    helper: "ui-resizable-helper"
});