Resizable: Modified the default z-index value of resizable handles. F…

…ixed #7960 - Dialog: Modal dialogs do not disable resizables on the page.
jquery · Nov 24, 2012 · 0cd470b0d5f8c617e761c4a6c90aeea4e3f54128 · 0cd470b
1 parent a68d5ca
commit 0cd470b0d5f8c617e761c4a6c90aeea4e3f54128
Unified Split

Showing with 19 additions and 2 deletions.

+2 −0 tests/unit/resizable/resizable.html

+1 −1 tests/unit/resizable/resizable_common.js

+14 −0 tests/unit/resizable/resizable_options.js

+2 −1 ui/jquery.ui.resizable.js
diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html
@@ -16,6 +16,8 @@
 			"ui/jquery.ui.core.js",
 			"ui/jquery.ui.widget.js",
 			"ui/jquery.ui.mouse.js",
+			"ui/jquery.ui.button.js",
+			"ui/jquery.ui.dialog.js",
 			"ui/jquery.ui.resizable.js"
 		]
 	});

diff --git a/tests/unit/resizable/resizable_common.js b/tests/unit/resizable/resizable_common.js
@@ -19,7 +19,7 @@ TestHelpers.commonWidgetTests('resizable', {
 		maxWidth: null,
 		minHeight: 10,
 		minWidth: 10,
-		zIndex: 1000,
+		zIndex: 90,
 
 		// callbacks
 		create: null

diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
@@ -210,4 +210,18 @@ test("zIndex, applied to all handles", function() {
 	});
 });
 
+test( "zIndex, less than a modal dialog's overlay by default", function() {
+	expect(1);
+
+	var resizable = $( '<div></div>' ).resizable();
+	var dialog = $( '<div></div>' ).dialog( { modal: true });
+
+	var resizableZIndex = resizable.resizable( 'option', 'zIndex' );
+	var overlayZIndex = $( '.ui-widget-overlay' ).css( 'zIndex' );
+	overlayZIndex = parseInt( overlayZIndex, 10 );
+
+	ok( resizableZIndex < overlayZIndex, "Resizables behind a modal dialog must have a smaller z-index than the overlay so that they're not resizable.  See #7960." );
+	dialog.dialog( 'destroy' );
+});
+
 })(jQuery);
diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js
@@ -42,7 +42,8 @@ $.widget("ui.resizable", $.ui.mouse, {
 		maxWidth: null,
 		minHeight: 10,
 		minWidth: 10,
-		zIndex: 1000
+		// See #7960
+		zIndex: 90
 	},
 	_create: function() {