fixed #3025 - dialog should have an autoResize option; default value:…

… true
jquery · Jun 25, 2008 · d0c11e932bec29bc271acf86db062e3a4d8d3797 · d0c11e9
1 parent b07cac1
commit d0c11e932bec29bc271acf86db062e3a4d8d3797
Unified Split

Showing with 36 additions and 2 deletions.

+20 −0 tests/dialog.js

+16 −2 ui/ui.dialog.js
diff --git a/tests/dialog.js b/tests/dialog.js
@@ -8,6 +8,7 @@
 
 var defaults = {
 	autoOpen: true,
+	autoResize: true,
 	buttons: {},
 	disabled: false,
 	dialogClass: null,
@@ -200,6 +201,25 @@ test("autoOpen", function() {
 	el.remove();
 });
 
+test("autoResize", function() {
+	expect(2);
+	el = $('<div>content<br>content<br>content<br>content<br>content</div>').dialog({ autoResize: false });
+		var expected = { height: el.height() };
+		var handle = $(".ui-resizable-se", dlg());
+		drag(handle, 50, 50);
+		var actual = { height: el.height() };
+		compare2(actual, expected, '.dialog({ autoResize: false })');
+	el.remove();
+	el = $('<div>content<br>content<br>content<br>content<br>content</div>').dialog({ autoResize: true });
+		var before = { width: el.width(), height: el.height() };
+		var handle = $(".ui-resizable-se", dlg());
+		drag(handle, 50, 50);
+		var expected = { width: before.width + 50, height: before.height + 50 };
+		var actual = { width: el.width(), height: el.height() };
+		compare2(actual, expected, '.dialog({ autoResize: true })');
+	el.remove();
+});
+
 test("buttons", function() {
 	expect(14);
 	var buttons = {

diff --git a/ui/ui.dialog.js b/ui/ui.dialog.js
@@ -40,9 +40,9 @@ $.widget("ui.dialog", {
 				.wrap('<div/>')
 				.wrap('<div/>'),
 
-			uiDialogContainer = uiDialogContent.parent()
+			uiDialogContainer = (this.uiDialogContainer = uiDialogContent.parent()
 				.addClass('ui-dialog-container')
-				.css({position: 'relative'}),
+				.css({position: 'relative', width: '100%', height: '100%'})),
 
 			title = options.title || uiDialogContent.attr('title') || '',
 			uiDialogTitlebar = (this.uiDialogTitlebar =
@@ -139,10 +139,12 @@ $.widget("ui.dialog", {
 					(options.resizeStart && options.resizeStart.apply(self.element[0], arguments));
 				},
 				resize: function(e, ui) {
+					(options.autoResize && self.size.apply(self));
 					(options.resize && options.resize.apply(self.element[0], arguments));
 				},
 				handles: resizeHandles,
 				stop: function(e, ui) {
+					(options.autoResize && self.size.apply(self));
 					(options.resizeStop && options.resizeStop.apply(self.element[0], arguments));
 					$.ui.dialog.overlay.resize();
 				}
@@ -231,12 +233,23 @@ $.widget("ui.dialog", {
 		pTop = Math.max(pTop, minTop);
 		this.uiDialog.css({top: pTop, left: pLeft});
 	},
+
+	size: function() {
+		var container = this.uiDialogContainer,
+			titlebar = this.uiDialogTitlebar,
+			content = this.element,
+			tbMargin = parseInt(content.css('margin-top')) + parseInt(content.css('margin-bottom')),
+			lrMargin = parseInt(content.css('margin-left')) + parseInt(content.css('margin-right'));
+		content.height(container.height() - titlebar.outerHeight() - tbMargin);
+		content.width(container.width() - lrMargin);
+	},
 
 	open: function() {
 		this.overlay = this.options.modal ? new $.ui.dialog.overlay(this) : null;
 		this.uiDialog.appendTo('body');
 		this.position(this.options.position);
 		this.uiDialog.show(this.options.show);
+		this.options.autoResize && this.size();
 		this.moveToTop(true);
 
 		// CALLBACK: open
@@ -289,6 +302,7 @@ $.widget("ui.dialog", {
 $.extend($.ui.dialog, {
 	defaults: {
 		autoOpen: true,
+		autoResize: true,
 		bgiframe: false,
 		buttons: {},
 		closeOnEscape: true,