dialog width:auto works incorrectly in IE6/7

[snobo]

When setting the Dialog's width to 'auto', in IE7, the dialog itself is correctly sized to fit the contents, but on first load the titlebar and the separator line above the buttons appear shrunk to the title text length; if you start resizing the dialog, they immediately acquire the width of the dialog.

In IE6, the dialog fills the whole screen width.

Demo: ​http://tmp.ahlers.com/test/bimv/timesheet.html

Also reported at ​http://groups.google.com/group/jquery-ui/browse_thread/thread/edcbfc05b89b695e/2cd41477147c725b?lnk=gst&q=snobo#2cd41477147c725b

[nghianghesi]

A work around solution: reformat ui css like this .ui-dialog .ui-dialog-titlebar { padding: .5em 0em .3em 0em; position: relative; width: 100%} .ui-dialog .ui-dialog-title { float: left; margin: .1em .2em .1em 1em; }

[nghianghesi]

Replying to nghianghesi:

A work around solution: reformat ui css like this .ui-dialog .ui-dialog-titlebar { padding: .5em 0em .3em 0em; position: relative; width: 100%} .ui-dialog .ui-dialog-title { float: left; margin: .1em .2em .1em 1em; }

Sorry, it doesn't work

[ulysses2r]

I have used the following workaround for ttlebar width on IE7:

// create the dialog as usual
$(popup).dialog({
	bgiframe: true,
	modal: true,
	height: 'auto',
	width: 'auto'
});

// adjust titlebar width mannualy - Workaround for IE7 titlebar width bug
$(popup.parentNode).find('.ui-dialog-titlebar').each(
	function() {
		$(this).width($(popup).width());
	}
)

dunno about IE6

[nelis]

Also found in 1.7.2 using IE8 The first proposed workaround didn't work. The second is not completely accurate Btw. I found different results when using localhost vs <my machine name> on my development machine (IIS 5). The localhost version didn't suffer from this problem. I have no explanation for this behavior (yet)

[nelis]

Replying to nelis:

Btw. I found different results when using localhost vs <my machine name> on my development machine (IIS 5). The localhost version didn't suffer from this problem. I have no explanation for this behavior (yet)

The difference is due to IE8 compatibility view settings. My machine name is seen as part of the intranet and the compatibility setting 'Display intranet sites in Compatibility View' is on by default. So this issue does relate to IE7 (or IE8 in compatibility mode)

[mmartineau]

Replying to ulysses2r:

I have used the following workaround for ttlebar width on IE7:

// create the dialog as usual
$(popup).dialog({
	bgiframe: true,
	modal: true,
	height: 'auto',
	width: 'auto'
});

// adjust titlebar width mannualy - Workaround for IE7 titlebar width bug
$(popup.parentNode).find('.ui-dialog-titlebar').each(
	function() {
		$(this).width($(popup).width());
	}
)

dunno about IE6

This worked a little better for me (immediately after dialog is opened):

$popup.dialog('option', 'width', $(popup).parent().width());

[Scott González]

Dialog's don't support auto width. The docs state that the option only accepts a number, which will be used for a pixel size. See ​jquery-ui-dev thread for a discussion about why we won't support auto width.

[Scott González]

#9275 is a duplicate of this ticket.

[Scott González]

#9772 is a duplicate of this ticket.