Skip to main content

Search and Top Navigation

#5695 closed bug (fixed)

Opened June 06, 2010 07:35PM UTC

Closed June 10, 2010 01:38AM UTC

Last modified August 04, 2010 01:24AM UTC

Bug Fix / Enhancement for alsoResize method

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

There is a logic bug in the resizable.alsoResize.resize._autoResize subroutine that adds top & left css values to child-elements of the main resizable element. This is illogical and creates a nasty positioning bug when anything other than position: static is used.

The bug is actually always there - in the form of illogical CSS - but only becomes visible when the autoResize element has position relative or absolute. It is easily seen in the dialog widget, which sets the ui-dialog-content element as an alsoResize element. To trigger the bug, simply add position: relative to the ui-dialog-content element. It's not unusual set position-relative on a DIV used as a dialog elements, so this is not an edge-case.

Here is an example of the bug in a basic dialog box...

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

The _autoResize method also has a redundant properties array - declared both as the 'default variable' and again as a default when used in the $.each statement. Since it is this array that required patching, I also eliminated that redundancy.

Here is the revised subroutine...

_alsoResize = function(exp, c) {
    $(exp).each(function() {
        var el = $(this), start = $(this).data("resizable-alsoresize"), style = {}, 
            css = c && c.length ? c : el.parents(ui.originalElement[0]) ? ['width', 'height'] : ['width', 'height', 'top', 'left'];

        $.each(css, function(i, prop) {
            var sum = (start[prop]||0) + (delta[prop]||0);
            if (sum && sum >= 0)
                style[prop] = sum || null;
        });

        //Opera fixing relative position
        if (/relative/.test(el.css('position')) && $.browser.opera) {
            self._revertToRelativePosition = true;
            el.css({ position: 'absolute', top: 'auto', left: 'auto' });
        }

        el.css(style);
    });
};

The only change is the css variable. Previously it ''always'' included both position (top/left) and size (width/height) properties. Now if the resizable element is a 'parent' of the alsoResize element, it skips the position properties because the inner element's position is relative to it parent(s), which ncludes the element being resized. Therefore it is illogical and incorrect to change the inner-element's position.

I hope this will accelerate getting the bug patched. Currently I must work around it by adding an inner-div within the content-div so that I can have relative positioning. I'd like to avoid this extra, non-semantic markup.

Cheers,

Kevin Dalman

Attachments (0)
Change History (5)

Changed June 06, 2010 08:10PM UTC by jquery-dev comment:1

NOTE: There is a typo in the patch provided above...

Shown as...

el.parents(ui.originalElement[0]) ?

Should be:

el.parents(ui.originalElement[0]).length ?

Changed June 09, 2010 07:30PM UTC by jquery-dev comment:2

NOTE: I have posted a more comprehensive update that covers all 3 methods of the autoResize functionality. This fixes other bugs in addition to the one in this ticket, so this is now the best code to use:

http://dev.jqueryui.com/ticket/5694

Changed June 09, 2010 09:55PM UTC by jquery-dev comment:3

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:4

milestone: TBD1.9
resolution: → fixed
status: newclosed

Fixed in a78d5ee.

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

milestone: 1.91.8.3