When resizing from top or left edge, Dialog adds top/left CSS values to content element

[jquery-dev]

If the widget-content element (wrapped dialog element) contains an absolutely positioned div, the content element becomes 'offset' by an amount equal to the dragging of the top- or left-resizer elements. (right- and bottom-resizers do not cause a problem)

For example, if you drag the left-resizer 50px to the right, the width of the content element is correctly reduced by 50px, however the content element is offset 50px to the right within the dialog-wrapper . This is because "left: 50px" is added to the content element's style.

This issue is consistent in all browsers, but can be worked-around by adding CSS to override the top/left settings added to the content-element:

#myDialogElement {
    top:  0 !important;
    left: 0 !important;
}

Here is a demo page illustrating the bug. Drag the top or left edge of the dialog to see the issue...

​http://layout.jquery-dev.net/samples/ui_dialog_bug.html

I have not traced which code is adding the top/left values to the content element. It may be the Dialog widget itself OR it could be the UI Resizable component handling the dialog resizing.

This bug was discovered when users put the UI Layout widget inside a UI Dialog. The Layout widget uses absolute positioning to create a border-layout. Here is a demo of that combination - this has top/left=0 hack applied so the bug does not occur...

​http://layout.jquery-dev.net/demos/layout_inside_dialog.html

[Scott González]

We don't support setting positioning on the content element inside a dialog. You could try using the layout plugin on a child of the content div. Feel free to discuss possible solutions on the forum if you have ideas.

[jquery-dev]

Replying to scott.gonzalez:

We don't support setting positioning on the content element inside a dialog. You could try using the layout plugin on a child of the content div. Feel free to discuss possible solutions on the forum if you have ideas.

I wasn't asking for solutions. I already have work-arounds, including the one posted above and the use of an inner-wrapper div. I posted a ticket because this is an obvious (and simple) deficiency in the widget's code, which I assumed there would be interest in addressing. I'm quite surprised that a major weakness in a key widget would be excused with "we don't support positioning".

I guess I'll have to fix it myself. Unfortunately it will take me much longer than the 10 minutes it would take the authors of the widget, but so be it.

[jquery-dev]

Replying to jquery-dev:

Replying to scott.gonzalez:

We don't support setting positioning on the content element inside a dialog. You could try using the layout plugin on a child of the content div. Feel free to discuss possible solutions on the forum if you have ideas.

I wasn't asking for solutions. I already have work-arounds, including the one posted above and the use of an inner-wrapper div. I posted a ticket because this is an obvious (and simple) deficiency in the widget's code, which I assumed there would be interest in addressing. I'm quite surprised that a major weakness in a key widget would be excused with "we don't support positioning".

I guess I'll have to fix it myself. Unfortunately it will take me much longer than the 10 minutes it would take the authors of the widget, but so be it.

OK, I found the error and submitted a patch. As expected, the bug was really in the Resizables widget, not Dialog. The root cause was a logic error in the alsoResize subroutine that applied 'position' to child elements of the main resizable element. This bug would have affected any use-case like this - not just the dialog.

​http://dev.jqueryui.com/ticket/5695

I posted the patch as a ticket rather than submitting it directly to the source. I trust it will find its way from there.

So you no longer need to tell users "Dialog does not support setting positioning on the content element inside a dialog". That was only due to this bug. You can now use any positioning desired, especially 'relative'. This makes it easier to create more sophisticated dialogs because the content-element can now properly contain floated and absolutely positioned elements.

I have reopened this ticked because "won't fix" is no longer accurate. Once the Resizable patch is merged, this ticked can be marked 'fixed' instead, avoiding any future confusion.

[jquery-dev]

FYI, I committed a patch to Github that fixes this all other related tickets:

​http://github.com/ALLPRO/jquery-ui/commit/8915fcf35a0643bff9ae2a1aa84d01fb3502001a

[Scott González]

Fixed in ​a78d5ee.