Skip to content
Permalink
Browse files

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

…lebar changes height during resize, button pane positioning changes.
  • Loading branch information
jzaefferer committed Dec 2, 2012
1 parent 5ba267e commit bdb0fbe993ab4c716f3cbc6f2c08072bf512115f
Showing with 10 additions and 1 deletion.
  1. +6 −1 tests/visual/dialog/complex-dialogs.html
  2. +4 −0 themes/base/jquery.ui.dialog.css
@@ -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>
@@ -24,6 +24,10 @@
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 16px .1em 0;

This comment has been minimized.

Copy link
@Jellyfrog

Jellyfrog Dec 3, 2012

The 16px margin is no longer needed?
margin: .1em 0; should be enough?

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Dec 4, 2012

Member

Correct, the right margin is no longer needed.

white-space: nowrap;
width: 90%;

This comment has been minimized.

Copy link
@Jellyfrog

Jellyfrog Dec 3, 2012

Why only 90%?
And why not use 100% and change the padding of ".ui-dialog .ui-dialog-titlebar" instead?

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Dec 4, 2012

Member

We could do that, but it doesn't help us get any more accurate about how much space we need on the right. The only way to be accurate is to use CSS calc() because of the mixture of em (titlebar padding) and px (close icon).

This comment has been minimized.

Copy link
@Jellyfrog

Jellyfrog Dec 4, 2012

True, but 90% seems a bit short imo. 96% seems better

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Dec 4, 2012

Member

96% would cause the ellipsis to run into the close button at 250px (maybe even a little wider).

overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;

0 comments on commit bdb0fbe

Please sign in to comment.
You can’t perform that action at this time.