From a1b32b59d57c2171af9ba0ed6b35ccde28794e3b Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 17 Nov 2012 01:29:39 -0500 Subject: [PATCH] Resizable: use css() instead of position() for absolute placement. Fixes #3815 - Resizable: absolutely positioned element inside scrollable element is repositioned when resized --- tests/unit/resizable/resizable_core.js | 23 ++++++++++++++++++++++- ui/jquery.ui.resizable.js | 5 +++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/tests/unit/resizable/resizable_core.js b/tests/unit/resizable/resizable_core.js index 447499f05..13da26ece 100644 --- a/tests/unit/resizable/resizable_core.js +++ b/tests/unit/resizable/resizable_core.js @@ -162,7 +162,7 @@ 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" ); @@ -170,4 +170,25 @@ test("handle with complex markup (#8756)", function() { equal( target.width(), 100, "compare width" ); }); +test("resizable accounts for scroll position correctly (#3815)", function() { + expect( 3 ); + + var position, top, left, + container = $("
").appendTo("#qunit-fixture"), + overflowed = $("
").appendTo( container ), + el = $("
").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); diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index 50cc19e47..41f3c03c0 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -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 }); } -- 2.39.5