Skip to content
Permalink
Browse files

Resizable: use css() instead of position() for absolute placement. Fi…

…xes #3815 - Resizable: absolutely positioned element inside scrollable element is repositioned when resized
  • Loading branch information...
mikesherov committed Nov 17, 2012
1 parent 9eaa572 commit a1b32b59d57c2171af9ba0ed6b35ccde28794e3b
Showing with 25 additions and 3 deletions.
  1. +22 −1 tests/unit/resizable/resizable_core.js
  2. +3 −2 ui/jquery.ui.resizable.js
@@ -162,12 +162,33 @@ test("handle with complex markup (#8756)", function() {
);

var handle = '.ui-resizable-w div', target = $('#resizable1').resizable({ handles: 'all' });

TestHelpers.resizable.drag(handle, -50);
equal( target.width(), 150, "compare width" );

TestHelpers.resizable.drag(handle, 50);
equal( target.width(), 100, "compare width" );
});

test("resizable accounts for scroll position correctly (#3815)", function() {
expect( 3 );

var position, top, left,
container = $("<div style='overflow:scroll;height:300px;width:300px;position:relative;'></div>").appendTo("#qunit-fixture"),
overflowed = $("<div style='width: 1000px; height: 1000px;'></div>").appendTo( container ),
el = $("<div style='height:100px;width:100px;position:absolute;top:10px;left:10px;'></div>").appendTo( overflowed ).resizable({ handles: 'all' }),
handle = ".ui-resizable-e";

container.scrollLeft( 100 ).scrollTop( 100 );

position = el.position();
left = el.css("left");
top = el.css("top");

TestHelpers.resizable.drag(handle, 50, 50);
deepEqual( el.position(), position, "position stays the same when resized" );
equal( el.css("left"), left, "css('left') stays the same when resized" );
equal( el.css("top"), top, "css('top') stays the same when resized" );
});

})(jQuery);
@@ -266,10 +266,11 @@ $.widget("ui.resizable", $.ui.mouse, {
el = this.element;

this.resizing = true;
this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };

// bugfix for http://dev.jquery.com/ticket/1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
if ( (/absolute/).test( el.css('position') ) ) {
el.css({ position: 'absolute', top: el.css('top'), left: el.css('left') });
} else if (el.is('.ui-draggable')) {
el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
}

0 comments on commit a1b32b5

Please sign in to comment.
You can’t perform that action at this time.