Dialog Height bug

[Kostrowsky]

From a message I sent to the jQuery UI and jQuery groups:

Just want to report an odd bug, using the UI dialog widget, in IE7 only:

How I create the dialog:

++++++

$('#' + popupId).dialog({

autoOpen: true, resizable : false, bgiframe : true, position : [posx?,posy?], width: 'auto', height: 'auto', minHeight: 100, minWidth: 100, draggable : false, stack : true, show : 'slideDown("slow")', hide : 'slideUp("slow")', close: function(event, ui){setLinkText(elementId, event, ui)}

});

++++++

The dialog markup:

++++++

<form id="map-params"> <table class="popup" id="popup-3">

<tr>

<td><input type="checkbox" name="categories" value="1"

checked="checked" /></td>

<td><img src="​http://localhost/images/people_20_20.png"

height="20px" width="20px" /></td>

<td>Services&nbsp;à&nbsp;la&nbsp;personne</td>

</tr> <tr>

<td><input type="checkbox" name="categories" value="2"

checked="checked" /></td>

<td><img src="​http://localhost/images/car_20_20.png" height="20px"

width="20px" /></td>

<td>Automobile</td>

</tr> <tr>

<td><input type="checkbox" name="categories" value="3"

checked="checked" /></td>

<td><img src="​http://localhost/images/sport_20_20.png"

height="20px" width="20px" /></td>

<td>Sport</td>

</tr> <tr>

<td><input type="checkbox" name="categories" value="4"

checked="checked" /></td>

<td><img src="​http://localhost/images/computer_20_20.png"

height="20px" width="20px" /></td>

<td>Informatique</td>

</tr> <tr>

<td><input type="checkbox" name="categories" value="5"

checked="checked" /></td>

<td><img src="​http://localhost/images/house_20_20.png"

height="20px" width="20px" /></td>

<td>Votre chez-soi</td>

</tr> <tr><td colspan="3"><a id="all-checkboxes" href="javascript:void

(0);">Select all</a></td></tr> </table> </form>

++++++

In IE7 (firefox spits out the dialog without hesitation), the code breaks at creation of the dialog: the dialog is not shown. Further investigation using Visual Web Dev indicates that at line 1048 of jquery.js (v1.3.1), an invalid value is set (minHeight = "-47px"), a negative value. May be it's proper within the framework, but IE chokes on it at odd times.

In this case, I just have to remove the last row of the table: <tr><td colspan="3"><a id="all-checkboxes" href="javascript:void (0);">Select all</a></td></tr>

And it works... sometimes. When it does not, the minHeight value is again a negative value, -23px. I then remove another table row, and it's pretty much stable from then on.

MORE INFO:

I'm fine with negative values, but in the line in question, it's the property minHeight that is set to either -47px or -23px. Quite a minHeight! It seems to me the UI framework has some difficulty calculating the actual height of the elements, or positions (I know it has to do with the fact that the rendering parameters of elements differ from browser to browser).

I've read many posts about the 'auto' height parameter, and it seems at fault here. If I get the actual height of the dialog element, add a few pixels, and inject the value in the dialog creation code, I can safely create dialogs as high as I want. The width parameter may be set to 'auto', or any value, the dialog box always respect the width of the element. The difficulty with injecting the actual height is that the value can only be retrieved once, at the very first use of the dialog. Afterwards, the height value (using $(#elementId).height()) is zero. But wait! Injecting zero + a few pixels as the height dialog parameter value is good enough! I suppose the jQuery coders have put a safeguard against setting a value below the actual size of the element. IE and FF agree to fit the content to its size. For Firefox to comply with the actual height though, you do need to remove the minHeight parameter. IE doesn't care.

[dndrnkrd]

Replying to Kostrowsky:

From a message I sent to the jQuery UI and jQuery groups:

Just want to report an odd bug, using the UI dialog widget, in IE7 only:

I've been able to reproduce this problem in IE6 as well, with what looks to be a negative min-height as the culprit. It looks like lines 452-458 of the ui.dialog.js source show an attempt to set the min-height of the dialog to: options.minHeight - nonContentHeight without regard for the size of either. If omitted, minHeight defaults to 150, so in all cases where nonContentHeight > 150px and the minHeight property is omitted, IE should be unable to render dialogs.

Changing (li. 452):

 this.element
	.css({
		minHeight: options.minHeight - nonContentHeight,
		height: options.height == 'auto'
			? 'auto'
			: options.height - nonContentHeight
	});

to:

this.element
	.css({
		minHeight: Math.max(options.minHeight - nonContentHeight,0),
		height: options.height == 'auto'
			? 'auto'
			: options.height - nonContentHeight
	});

hopefully will take care of it.

[Scott González]

Duplicate of #3091. Fixed in r1845.

[mconway]

Replying to scott.gonzalez:

Duplicate of #3091. Fixed in r1845.

This bug also affects the actual height of the dialog.

I had heights also going negative and breaking IE7 and 8, here is my entire code:

		this.element
			.css({
				minHeight: Math.max(options.minHeight - nonContentHeight,0),
				height: options.height == 'auto'
					? 'auto'
					: Math.max(options.height - nonContentHeight,0)
			});

I have tested this fix myself, and it seems to be working.

[kenman]

Replying to scott.gonzalez:

Duplicate of #3091. Fixed in r1845.

Did you link to the wrong dupe? I don't see how this could be related to #3091 in any form or fashion. Also not, #3091 was closed as WONTFIX (and nothing was committed to SVN).

This bug described on this ticket is still present in JQ 1.4.1 and JUI 1.7.2.

Going to test with 1.8.

[kenman]

Still present in 1.8rc1. Initial size of dialog is fine, however, resizing the dialog, closing it, then reopening causes the height to reset to ~83px. I'll try to get a test case setup.

[kenman]

bug repro

[kenman]

More info: bug present in IE8 (XP), but not apparent in FF 3.6. It seems to be triggered due to quirks mode.

To reproduce: load up the attached dialog.html in IE 8, open the dialog (using the button), resize it to a larger size, close, re-open; the dialog will now be shrunk. If you resize the dialog to a smaller size, the it will properly resize itself.

Also, there are scrollbar abnormalities present also when resizing.

Lastly, and this might be a separate bug, but FF 3.6 does not seem to do any automatic resizing, whatsoever.

[Scott González]

Sorry, duplicate of #3901.