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...
1 parent 9eaa572 commit a1b32b59d57c2171af9ba0ed6b35ccde28794e3b @mikesherov mikesherov committed Nov 17, 2012
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.