#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 14 years ago by
Milestone: | TBD → 1.8 |
---|
comment:2 follow-up: 3 Changed 14 years ago by
comment:3 Changed 14 years ago by
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 follow-up: 8 Changed 14 years ago by
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 follow-up: 6 Changed 14 years ago by
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 Changed 14 years ago by
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 Changed 13 years ago by
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 13 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
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.
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; }