Skip to main content

Search and Top Navigation

#3930 closed bug (duplicate)

Opened January 24, 2009 07:26PM UTC

Closed January 29, 2009 04:13AM UTC

Last modified January 30, 2010 04:13PM UTC

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 : [pos['x'],pos['y']],

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 à la 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 (0.5 KB) - added by kenman January 29, 2010 07:40PM UTC.

    bug repro

Change History (8)

Changed January 26, 2009 04:46PM UTC by paul comment:1

milestone: TBD1.6

Changed January 28, 2009 05:41AM UTC by dndrnkrd comment:2

Replying to [ticket:3930 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.

Changed January 29, 2009 04:13AM UTC by scottgonzalez comment:3

component: ui.coreui.dialog
priority: minorcritical
resolution: → duplicate
status: newclosed

Duplicate of #3091. Fixed in r1845.

Changed January 29, 2009 04:29PM UTC by mconway comment:4

Replying to [comment:3 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.

Changed January 29, 2010 04:08PM UTC by kenman comment:5

Replying to [comment:3 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.

Changed January 29, 2010 04:16PM UTC by kenman comment:6

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 January 29, 2010 07:46PM UTC by kenman comment:7

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.

Changed January 30, 2010 04:13PM UTC by scottgonzalez comment:8

Sorry, duplicate of #3901.