Dialog: Restrict title to a single line. Fixes #7773 - Dialog: If titlebar changes...

diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html
index 5cd9271aef2d65cc894c9f9b4c3d951975c2e3b0..9cc2d1416c4e55274b9ad2dc0075d82eafd0c9c6 100644 (file)
--- 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
index 986ce8604dddb9686c3bb559d21e127f7db61e73..370c95da560872b0f5a5bd3f32c5aa5c8eb1759d 100644 (file)
--- 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;