Dialog Height bug

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.