Dialog: Restrict title to a single line. Fixes #7773 - Dialog: If tit…

…lebar changes height during resize, button pane positioning changes.
jquery · Dec 3, 2012 · bdb0fbe · Jellyfrog · Dec 3, 2012 · scottgonzalez
1 parent 5ba267e
commit bdb0fbe
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html
@@ -20,6 +20,11 @@
 	<script src="../../../ui/jquery.ui.autocomplete.js"></script>
 	<script src="../../../ui/jquery.ui.tooltip.js"></script>
 
+	<style>
+	body {
+		font-size: 62.5%;
+	}
+	</style>
 	<script>
 	$(function() {
 		var dialog = $( "#dialog" ).dialog({
@@ -98,7 +103,7 @@
 
 <button id="open-dialog">Reopen dialog</button>
 
-<div id="dialog" title="Basic dialog">
+<div id="dialog" title="Basic dialog, but with a really long title that doesn't quite fit.">
 	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
 	<p><button id="open-datepicker">Open another window with a datepicker.</button></p>
 	<p><button id="destroy-dialog">Self destruct</button></p>

diff --git a/themes/base/jquery.ui.dialog.css b/themes/base/jquery.ui.dialog.css
@@ -24,6 +24,10 @@
 .ui-dialog .ui-dialog-title {
 	float: left;
 	margin: .1em 16px .1em 0;
+	white-space: nowrap;
+	width: 90%;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .ui-dialog .ui-dialog-titlebar-close {
 	position: absolute;