Question

I have a widget based on jQuery UI’s resizable (version 1.8.24) which is filled with items immediately upon being displayed, and can then be cleared and filled again based on user’s actions. It looks roughly like this:

<div class="dialog ui-resizable">
    <div class="dialog-header">…</div>
    <div class="dialog-contents">…</div>
    <div class="dialog-controls">…</div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000"></div>
    …
</div>

It is cast into a Resizable using this code:

myDialog.resizable(
            { alsoResize: myDialog.find(".dialog-contents"),
              minHeight: minH,
              minWidth: minW,
              maxHeight: maxH,
              maxWidth: maxW
            }).show().focus();
updateMyDialogContents();

If the widget was not resized manually yet, it grows and shrinks along with contents of div.dialog-contents. This is undesired. However, if any of the resizing handles were dragged, it starts behaving like I want it to, i. e. keeps its size constant regardless of what happens inside div.dialog-contents.

How do I make it keep its size constant from the very beginning?

I have noticed that _mouseDrag method of resizable sets width and height to their actual values in the DOM element’s style attribute. Normally I would set the style attribute myself immediately after rendering the widget, but it has a number of inner elements in alsoResize, so this does not work.

Is there a way to call _mouseDrag programmatically with zero coordinate deltas so the widget will think that a real "mousedrag" event was triggered? If this was possible, I would solve this issue by simulating a mouse drag immediately after the widget was initialized.

I have tried things like

dlg.data("resizable").
    _mouseDrag(new $.Event("mousedrag",
                           { dragState: "end",
                             dragDeltaT: 0,
                             dragDelta: 0,
                             dragDeltaX: 0,
                             dragDeltaY: 0 }));

with different events with no apparent success (it throws an error because some attribute always seems to be missing).

Edit 1: jQuery version.

Answer 1

I have settled for this hack:

        var noStretchingHack = function (widget) {
            var contents = widget.find(".dialog-contents");
            var hDiff = widget.height() - contents.height();
            widget.css({width: "600px",
                        height: (400 + hDiff) + "px",
                        top: "0px",
                        left: "0px"});
            contents.css({width: "600px",
                          height: "400px"});
            widget.trigger("resize");
        };

I pass it as a callback to the contents updater function so that it executes right after the contents are filled for the first time. I am not proud of myself and I would love to hear about a more elegant solution, if it exists for jQuery UI 1.8.24.