jQuery UI Dialog resize helper

Question

I have some heavy content inside UI dialog and need to resize it only once, at the end of the resize process. I need the behavior of the resizable when helper option is set for the dialog, so I can use 'stop' event to resize my content. There is same issue described here: jQuery forum

May be someone knows how to solve it.

Aloisia

Richard Worth has answered your question in the forum thread you link to. Did you try his suggestion? Are you looking for help understanding his answer? – Limbert

Richard Worth describes way it should work, but it does not. In this forum topic there is jQuery's bug description below his answer. I tried this, of course. I had idea to use another div as the dialog's child, set it resizable and resize dialog and it's content on this div 'stop' event, but the helper shows below the dialog, and visible only outside it. – Aloisia

That bug does not seem to impact the stop event. I do not see any issue with jQuery 1.7.2 / jQuery UI 1.8.18. Here is a fiddle for you to test in your browser. – Limbert

There's some other thing I want to have. I need to resize dialog with helper, like this jqueryui.com/demos/resizable/#helper. See jsfiddle.net/3bUjv for bug example. – Aloisia

Answer 1

There is indeed an issue with the helper feature of the resizable widget. You can work around it by destroying the widget, then recreating it with the appropriate helper option immediately afterwards:

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

You will find an updated fiddle here.

Chaff

This works, but the helper is visible only outside the dialog. If we making dialog larger it's OK, but if we making it smaller we can't see the helper. – Aloisia

@vadimv, that's a minor styling issue. I get good results if I style .ui-resizable-helper with z-index: 10000; (fiddle). – Limbert