Dialog: If titlebar changes height during resize, button pane positioning changes

[raphinesse]

OS: Windows Vista Business x86 SP2
Tested Browsers: FF 7.0.1, Chrome 14.0.835.202, IE 9.0.8112.16421

To reproduce:

1. Visit ​http://jqueryui.com/demos/dialog/#modal-message
2. Execute following code in your Browser's console:
   $('#dialog-message').dialog('option', 'title', 'Download completely messed up due to connectivity issues!')
3. Change the dialog's width using the resizeable feature so that the number of lines in .ui-dialog-titlebar changes

Expected result: .ui-dialog-buttonpane stays at the bottom of the dialog

Experienced result: .ui-dialog-buttonpane moves up and down and eventually out of view if you reduce the dialogs width by a sufficient amount

[Jörn Zaefferer]

Fot the buttonpane to stay fully visible, either the height of the dialog needs to grow or the content area to shrink. Currently the additional height used by the titlebar is "taken" from the buttonpane instead. Since the content will scroll-overflow eventually anyway, reducing the height of the content seems like the right apporach to me.

[Scott González]

Any objections to just forcing the title to always be a single line using white-space: nowrap?

[Scott González]

We could actually use white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; That should get us a reasonable display in all browsers.

[Jörn Zaefferer]

Pull request: ​https://github.com/jquery/jquery-ui/pull/856

[Jörn Zaefferer]

Dialog: Restrict title to a single line. Fixes #7773 - Dialog: If titlebar changes height during resize, button pane positioning changes.

Changeset: bdb0fbe993ab4c716f3cbc6f2c08072bf512115f