Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#3930 closed bug (duplicate)

Dialog Height bug

Reported by: Kostrowsky Owned by:
Priority: critical Milestone: 1.7
Component: ui.dialog Version: 1.6rc5
Keywords: UI Dialog Height Auto IE Cc:
Blocked by: Blocking:

Description

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.

Attachments (1)

dialog.html (559 bytes) - added by kenman 10 years ago.
bug repro

Download all attachments as: .zip

Change History (9)

comment:1 Changed 11 years ago by paul

Milestone: TBD1.6

comment:2 in reply to:  description Changed 11 years ago by 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.

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

Component: ui.coreui.dialog
Priority: minorcritical
Resolution: duplicate
Status: newclosed

Duplicate of #3091. Fixed in r1845.

comment:4 in reply to:  3 Changed 11 years ago by 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.

comment:5 in reply to:  3 Changed 10 years ago by 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.

comment:6 Changed 10 years ago by 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.

Changed 10 years ago by kenman

Attachment: dialog.html added

bug repro

comment:7 Changed 10 years ago by 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.

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

Sorry, duplicate of #3901.

Note: See TracTickets for help on using tickets.