Opened 9 years ago

Closed 9 years ago

Last modified 4 years ago

#4437 closed bug (wontfix)

dialog width:auto works incorrectly in IE6/7

Reported by: snobo Owned by:
Priority: major Milestone: 1.8
Component: ui.dialog Version: 1.7.1
Keywords: tab width title Cc:
Blocked by: Blocking:

Description

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

Change History (10)

comment:1 Changed 9 years ago by rdworth

Milestone: TBD1.8

comment:2 Changed 9 years ago by 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; }

comment:3 in reply to:  2 Changed 9 years ago by 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

comment:4 Changed 9 years ago by 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

comment:5 Changed 9 years ago by 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)

comment:6 in reply to:  5 Changed 9 years ago by 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)

comment:8 in reply to:  4 Changed 9 years ago by 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());

comment:9 Changed 9 years ago by Scott González

Resolution: wontfix
Status: newclosed

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.

comment:10 Changed 5 years ago by Scott González

#9275 is a duplicate of this ticket.

comment:11 Changed 4 years ago by Scott González

#9772 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.