From f5d5b972d14b4631c142129d261c8fb33bfc5f34 Mon Sep 17 00:00:00 2001
From: Jyoti Deka
Date: Sat, 19 Oct 2013 00:39:15 -0400
Subject: [PATCH] Dialog & Resizable: css styles fixed NE,SE,S,E handles. Fixed
#9521 ui.Dialog:Resizable dialogs move/resize out of viewport boundary -
which results in scrollbar
---
tests/unit/dialog/dialog.html | 2 +-
tests/unit/dialog/dialog_core.js | 40 +++++++++++++++++++++++++++++
themes/base/jquery.ui.dialog.css | 8 +++---
themes/base/jquery.ui.resizable.css | 26 +++++++++----------
4 files changed, 58 insertions(+), 18 deletions(-)
diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html
index d8506a1bd6c..2e646262fa8 100644
--- a/tests/unit/dialog/dialog.html
+++ b/tests/unit/dialog/dialog.html
@@ -14,7 +14,7 @@
TestHelpers.loadResources({
- css: [ "ui.core", "ui.dialog" ],
+ css: [ "ui.core", "ui.dialog", "ui.resizable" ],
js: [
"ui/jquery.ui.core.js",
"ui/jquery.ui.widget.js",
diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js
index c08019da9f6..ebd83dee99b 100644
--- a/tests/unit/dialog/dialog_core.js
+++ b/tests/unit/dialog/dialog_core.js
@@ -137,6 +137,46 @@ test( "#7960: resizable handles below modal overlays", function() {
dialog.dialog( "destroy" );
});
+test( "#9521: Dialog: Resiable dialogs move/resize out of viewpoint boundry", function() {
+ expect( 2 );
+ var doc = {},
+ dialogWithNoResize = {},
+ dialogWithResize = {},
+ delta = {},
+ elementWithNoResize = $( "" ).dialog({ resizable:false }),
+ elementWithResize = $( "" ).dialog({ resizable:true }),
+ handleWithNoResize = $( ".ui-dialog-titlebar", elementWithNoResize.dialog( "widget" )),
+ handleWithResize = $( ".ui-dialog-titlebar", elementWithResize.dialog( "widget" )),
+ initialScroll = $( window ).scrollTop();
+
+ // Dialog with NO Resize Handles
+ doc.height = $( document ).height();
+ doc.width = $( document ).width();
+ dialogWithNoResize.height = elementWithNoResize.outerHeight();
+ dialogWithNoResize.width = elementWithNoResize.outerWidth();
+ delta.width = doc.width - dialogWithNoResize.width;
+ delta.height = doc.height - dialogWithNoResize.height;
+
+ elementWithNoResize.offset({ top: 0, left: 0 });
+ TestHelpers.dialog.drag( elementWithNoResize, handleWithNoResize, delta.width, delta.height );
+
+ equal( $(window).scrollTop(), initialScroll, "Draggable with no resize - no scrollbar after drag" );
+
+ // Dialog with Resize Handles
+ elementWithResize.offset({ top: 0, left: 0 });
+ dialogWithResize.height = elementWithResize.outerHeight();
+ dialogWithResize.width = elementWithResize.outerWidth();
+ delta.width = doc.width - dialogWithResize.width;
+ delta.height = doc.height - dialogWithResize.height;
+
+ TestHelpers.dialog.drag( elementWithResize, handleWithResize, delta.width, delta.height );
+
+ equal( $(window).scrollTop(), initialScroll, "Draggable with resize - no scrollbar after drag" );
+
+ elementWithNoResize.remove();
+ elementWithResize.remove();
+});
+
asyncTest( "Prevent tabbing out of dialogs", function() {
expect( 3 );
diff --git a/themes/base/jquery.ui.dialog.css b/themes/base/jquery.ui.dialog.css
index b49a4a76da1..fc9ec9c107f 100644
--- a/themes/base/jquery.ui.dialog.css
+++ b/themes/base/jquery.ui.dialog.css
@@ -58,10 +58,10 @@
cursor: pointer;
}
.ui-dialog .ui-resizable-se {
- width: 12px;
- height: 12px;
- right: -5px;
- bottom: -5px;
+ width: 7px;
+ height: 7px;
+ right: 0;
+ bottom: 0;
background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
diff --git a/themes/base/jquery.ui.resizable.css b/themes/base/jquery.ui.resizable.css
index f0f8c474de0..1182d84dee1 100644
--- a/themes/base/jquery.ui.resizable.css
+++ b/themes/base/jquery.ui.resizable.css
@@ -27,15 +27,15 @@
}
.ui-resizable-s {
cursor: s-resize;
- height: 7px;
+ height: 4px;
width: 100%;
- bottom: -5px;
+ bottom: 0;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
- width: 7px;
- right: -5px;
+ width: 4px;
+ right: 0;
top: 0;
height: 100%;
}
@@ -48,17 +48,17 @@
}
.ui-resizable-se {
cursor: se-resize;
- width: 12px;
- height: 12px;
- right: 1px;
- bottom: 1px;
+ width: 11px;
+ height: 11px;
+ right: 0;
+ bottom: 0;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
- bottom: -5px;
+ bottom: 0;
}
.ui-resizable-nw {
cursor: nw-resize;
@@ -69,8 +69,8 @@
}
.ui-resizable-ne {
cursor: ne-resize;
- width: 9px;
- height: 9px;
- right: -5px;
- top: -5px;
+ width: 6px;
+ height: 6px;
+ right: 0;
+ top: 0;
}