#7773 closed bug (fixed)

Opened October 07, 2011 10:56AM UTC

Closed December 03, 2012 06:10PM UTC

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

Reported by: raphinesse Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (7)

Changed October 07, 2011 11:59AM UTC by scottgonzalez comment:1

status: new → open
summary: Changing line count in .ui-dialog-titlebar breaks dialog layout → Dialog: If titlebar changes height during resize, button pane positioning changes

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:2

milestone: 1.9.0 → 1.10.0

Changed November 30, 2012 11:38AM UTC by jzaefferer comment:3

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.

Changed November 30, 2012 09:41PM UTC by scottgonzalez comment:4

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

Changed November 30, 2012 09:47PM UTC by scottgonzalez comment:5

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

Changed December 02, 2012 11:56AM UTC by jzaefferer comment:6

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

Changed December 03, 2012 06:10PM UTC by Jörn Zaefferer comment:7

resolution: → fixed
status: open → closed

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

Changeset: bdb0fbe993ab4c716f3cbc6f2c08072bf512115f