Search and Top Navigation
#6180 closed bug (wontfix)
Opened October 13, 2010 05:10PM UTC
Closed October 14, 2010 12:38AM UTC
Last modified October 11, 2012 09:15PM UTC
Size of Dialog broke in 1.8.1 with core 1.4.2 Internet Explorer 7 and perhaps others
| Reported by: | dwinslow | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | |
| Component: | ui.dialog | Version: | 1.8.5 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
In 1.8, in the _size function for the Dialog UI this code
reset content sizing
hide for non content measurement because height: 0 doesn't work
in IE quirks mode (see #4350)
this.element.css('width', 'auto').hide();
worked with core 1.4.2 and dialogs in IE 7 worked acceptably - in terms of their INITIAL size (width and height).
In 1.8.1 the above code changed to
reset content sizing
hide for non content measurement because height: 0 doesn't work
in IE quirks mode (see #4350)
this.element.css({
width: 'auto',
minHeight: 0,
height: 0
});
and no longer works in IE 7 although Firefox is ok.
I have supporting pictures and here is the code ...
$(function() {
$('#helpDialog').dialog({
autoOpen: false,
height: 240,
width: 640,
dialogClass: 'ui-widget-content-dialog',
title: 'Home page help',
modal: false
});
$('#helpButton').click(function() {
$('#helpDialog').dialog('open');
return false;
});
});
Two supporting pictures ... one using 1.4.2 and 1.8.5
One using 1.4.2 and 1.8.5 MODIFIED to use 1.8 code for _size function.
PIC1 = using 1.4.2 and 1.8.5
PIC2 = using 1.4.2 and 1.8.5 MODIFIED to use 1.8 code for _size function.
Attachments (2)
Change History (6)
Changed October 13, 2010 05:48PM UTC by comment:1
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
Changed October 13, 2010 08:26PM UTC by comment:2
Replying to [comment:1 scott.gonzalez]:
I can't reproduce this. Can you please provide the page you're using that has the problem?
Here's how to reproduce the problem.
1) Download jQuery 1.8.5 (I chose the Sunny Theme)
2) Create a file in the \\development-bundle\\demos\\dialog folder called BUG.HTML
3) In BUG.HTML place the code found between =============== and =============== and save BUG.HTML.
4) Now, try BUG.HTML in IE 7 and if you have Firefox try it there as well.
Observe the size of the dialog that comes up when you click the HELP button in IE 7.
5) Now, modify \\jQUERY 185 COMPLETE\\development-bundle\\ui\\jquery.ui.dialog.js as follows:
REPLACE
// reset content sizing
// hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350)
this.element.css({
width: 'auto',
minHeight: 0,
height: 0
});
WITH
// reset content sizing
// hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350)
// PLEASE NOTE THAT THIS IS 1.8 CODE ... THE PROBLEM DIDN'T EXIST IN 1.8 with core 1.4.2
this.element.css('width', 'auto').hide();
Close all your browsers and try BUG.HTML again.
Note the size of the dialog in IE 7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- version date : $Date: 2008-10-17 02:44:18 $Revision: 1.1.2.57 $ -->
<html>
<head>
<!-- jquery integration: removed IBM WebSphere meta data, added jquery css and js and some script -->
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<script type="text/javascript">
<!--//
$(document).ready(function(){
$.fx.speeds._default = 0;
$(function() {
$("input:submit, a, button", ".makeButton").button();
});
$(function() {
$('#helpDialog').dialog({
autoOpen: false,
height: 240,
width: 640,
dialogClass: 'ui-widget-content-dialog',
title: 'Home page help',
modal: false
});
$('#helpButton').click(function() {
$('#helpDialog').dialog('open');
return false;
});
});
});
//-->
</script>
<style>
.instructions {
font: verdana, helvetica, arial, sans-serif ;
font-size: 1.00em;
}
.tipword {
border: thin; background-color: lavender; font-style: italic;
color: blue;
}
.widgetreferencehelp {
color: #A46A32; /* two shades darker than Peru */
font-style: italic;
}
.warningword {
border: thin; background-color: lavender; font-style: italic;
color: red;
}
.tip {
font: verdana, helvetica, arial, sans-serif ;
font-size: .7em;
margin: 0em 0em 0em 1em;
}
.warning {
font: verdana, helvetica, arial, sans-serif ;
font-size: .9em;
margin: 0em 0em 0em 1em;
}
.instructions p{
margin: 1em 3em 2em 2em;
}
.instructions li {
margin-top: 7px;
}
.instructions .label {
font-size: 120%;
font-stretch: wider;
font-weight: bold;
background: rgb(0,73,96);
color: white;
padding: 4px 8px 4px 8px;
text-align: left;
}
.instructions .label2 {
font-size: 120%;
font-stretch: wider;
font-weight: bold;
background: white;
color: black;
padding: 4px 8px 4px 8px;
text-align: left;
}
.content {
color: black;
padding: 0px;
}
.e {
font-size: 110%;
font-style: italic;
color: red;
font-family: 'Georgia', serif;
}
.close {
float:right;
font-size:0.55em;
margin: 0.5em 1em 0.1em 0;
color: #cccccc;
}
.content p {
margin: 5px 0px 0px 0px;
}
</style>
</head>
<body>
<!-- MENU -->
<span id="helpButton" class="makeButton buttonize">
<a title="Get help for this page" class="theMenulinks">
Help
</a>
</span>
<div style="display: none" id="helpDialog">
<div class="instructions">
<div class="content">
<p>
Every page of this application has a menu bar. The menu bar varies from page to page. Here's
what the menu bar looks like from the <span class="widgetreferencehelp">Manage Users</span> page - a typical page in the application:</p>
<p></p><p>
As you go from page to page, the menu bar will change. But, three
things on the menu bar that will never change are <span class="widgetreferencehelp">Home</span>, <span class="widgetreferencehelp">Help</span>
and <span class="widgetreferencehelp">Quit</span>. You can always return to this home page by clicking
the <span class="widgetreferencehelp">Home</span> icon, get help on a page you are on, or quit
the application whenever you wish. These functions are always available and just a mouse click away.</p>
<p>From the home page you will be able to:</p>
<ul>
<li>Manage your staff by taking advantage of the Manage Users feature.</li>
<li>Add recording information to an <span class="redE">e</span>RETR filing.</li>
<li>Provide official parcel numbers for a return.</li>
<li>View electronically filed real estate transfer returns by date recorded, county document ID or county/municipality</li>
<li>Provide assessement data for your municipalities.</li>
<li>View or download electronically filed real estate transfer returns for a selected municipality, or download for a selected county .</li>
<li>View or print a sales summary report for a selected municipality, and within this report choose a single sale to view or print.</li>
<li>Download sales data for a selected municipality. </li>
</ul>
</div>
</div>
<br />
<div class="warning">
<div class="label"><span class="warningword">WARNING</span> Do not use your browser's Back and Forward buttons</div>
<div class="content">
<p>Please use the <span class="widgetreferencehelp">Menu bar</span> to navigate this application. To avoid using your browser's navigation buttons accidentally, you can hide your
browser's Back and Forward buttons. To hide or show them in
Microsoft Internet Explorer choose View | Toolbars | Standard Buttons.</p>
</div>
</div>
</div>
</body>
</html>
Changed October 13, 2010 09:34PM UTC by comment:3
| resolution: | worksforme |
|---|---|
| status: | closed → reopened |
Scott - Just read about using this Wiki - I'll re-open so it can be re-assigned.
Dave
Changed October 13, 2010 10:28PM UTC by comment:4
Here's a different "patch" for the problem.
Starting with 1.8.1 of jquery.ui.dialog.js and HIGHER, instead of reverting to 1.8 code, this patch seems to fix IE7 and higher.
Code is in the _size function of jquery.ui.dialog.js ...
// reset content sizing
// hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350)
this.element.css({
width: 'auto',
minHeight: 0,
height: 0
}).hide(); // Adding .hide() seems to resove my problems with 1.8.5 jquery.ui.dialog.js
Changed October 14, 2010 12:38AM UTC by comment:5
| component: | ui.core → ui.dialog |
|---|---|
| resolution: | → wontfix |
| status: | reopened → closed |
Okay, the reason that I couldn't reproduce this before is because of the DOCTYPE. The DOCTYPE you're using triggers quirks mode, and unfortunately we don't support that. If it's possible for you to change your DOCTYPE, dialogs will start sizing correctly again. Even the full HTML 4.01 Transitional with the system identifier will work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Changed October 11, 2012 09:15PM UTC by comment:6
| milestone: | TBD |
|---|
Milestone TBD deleted
I can't reproduce this. Can you please provide the page you're using that has the problem?