Skip to main content

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)
  • PIC1.JPG (99.4 KB) - added by dwinslow October 13, 2010 05:24PM UTC.
  • PIC2.JPG (54.1 KB) - added by dwinslow October 13, 2010 05:13PM UTC.
Change History (6)

Changed October 13, 2010 05:48PM UTC by scottgonzalez comment:1

resolution: → worksforme
status: newclosed

I can't reproduce this. Can you please provide the page you're using that has the problem?

Changed October 13, 2010 08:26PM UTC by dwinslow 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.

BEGIN BUG.HTML CODE
<!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>
END BUG.HTML CODE

Changed October 13, 2010 09:34PM UTC by dwinslow comment:3

resolution: worksforme
status: closedreopened

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 dwinslow 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 scottgonzalez comment:5

component: ui.coreui.dialog
resolution: → wontfix
status: reopenedclosed

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 scottgonzalez comment:6

milestone: TBD

Milestone TBD deleted