Posted first on the jQuery group.
Hi,
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.
Thanks for any help.
+++++++
Some more info, also posted on the jQuery group:
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.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
![http://localhost/images/people_20_20.png"](http://localhost/images/people_20_20.png"){kind=link}
![http://localhost/images/car_20_20.png"](http://localhost/images/car_20_20.png"){kind=link}
![http://localhost/images/sport_20_20.png"](http://localhost/images/sport_20_20.png"){kind=link}
![http://localhost/images/computer_20_20.png"](http://localhost/images/computer_20_20.png"){kind=link}
![http://localhost/images/house_20_20.png"](http://localhost/images/house_20_20.png"){kind=link}