Using jQuery Resizable Helper on a Dialog

Question

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

Answer 1

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"
});

Answer 2

According to this - http://forum.jquery.com/topic/specify-drag-and-resize-option-for-dialogs it should be possible by doing:

dlg.dialog('widget').resizable('option','helper','ui-resizable-helper')

But unfortunately there is a bug in jQueryUI (http://bugs.jqueryui.com/ticket/6723) that blocks this from working.

One possible solution would be to use jQueryUI resizable instead of dialog. Depends on how heavy you rely on dialog's functionality.