Resizable: use css() instead of position() for absolute placement. Fixes #3815 - Resizable: absolutely positioned element inside scrollable element is repositioned when resized

This commit is contained in:
Mike Sherov 2012-11-17 01:29:39 -05:00
parent 9eaa572de1
commit a1b32b59d5
2 changed files with 25 additions and 3 deletions

View File

@ -170,4 +170,25 @@ test("handle with complex markup (#8756)", function() {
equal( target.width(), 100, "compare width" ); 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); })(jQuery);

View File

@ -266,10 +266,11 @@ $.widget("ui.resizable", $.ui.mouse, {
el = this.element; el = this.element;
this.resizing = true; this.resizing = true;
this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };
// bugfix for http://dev.jquery.com/ticket/1749 // 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 }); el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
} }