#5662 closed bug (fixed)

Opened May 27, 2010 05:10PM UTC

Closed June 10, 2010 01:38AM UTC

Last modified August 04, 2010 01:24AM UTC

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

Reported by: jquery-dev Owned by:
Priority: major Milestone: 1.8.3
Component: ui.dialog Version: 1.8.1
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (6)

Changed May 27, 2010 05:39PM UTC by scottgonzalez comment:1

resolution: → wontfix
status: new → closed

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.

Changed June 06, 2010 04:14PM UTC by jquery-dev comment:2

Replying to [comment:1 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.

Changed June 06, 2010 08:00PM UTC by jquery-dev comment:3

resolution: wontfix
status: closed → reopened

Replying to [comment:2 jquery-dev]:

Replying to [comment:1 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.

Changed June 09, 2010 09:53PM UTC by jquery-dev comment:4

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

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

Changed June 10, 2010 01:38AM UTC by scottgonzalez comment:5

milestone: TBD → 1.9
resolution: → fixed
status: reopened → closed

Fixed in a78d5ee.

Changed August 04, 2010 01:24AM UTC by scottgonzalez comment:6

milestone: 1.9 → 1.8.3