Start Building Professional
Web Apps Today

dhtmlxCombo - blank row not same height as other rows in Firefox

I am using a dhtmlxCombo control and it all works fine.
But I have just noticed that if I have a blank row at the top of the combo, in IE this blank row is the same height as all other rows.
But with Firefox, the row is only a few pixels high.
It's not a massive issue but it would be nice to be consistent between browsers.

Yes, I mean the top row in the option list.
I deliberately want a blank row at the very top because I want the user to go in and choose a non-blank option beneath it.
The XML that is generated server side, generates this for the blank row:
<option value="" />
This is as I would have expected.

It's just when this gets converted into the html by dhtmlxCombo, the <div> that is generated has no height when rendered in Firefox - I think this is because the <div> has no content.
But when rendered in IE, the blank row is the same height as all other non-blank rows beneath it.

I'm having trouble trying to get the server to output that as I don't think it's valid XML.

The xml string I put in comes out as:
<option value="">&lt;![CDATA[&nbsp;]]&gt;</option> in the xml generated on the server (ie the < and > get encoded).

I've tried <option value="">&nbsp;</option> without the CDATA bit but that doesn't work.

I'm thinking that <![CDATA[&nbsp;]]> should be <![CDATA[&nbsp;]] /> (ie with a closing /> to make it valid XML).

&#160; worked whereas &nbsp; didn't.
Not sure why but it is now consistent between Firefox and IE which is all I wanted.
Thanks.

Actually, having said this works (in that the "blank" row IS now the same height as the other "non-blank" rows in Firefox) there is now a slight side effect which is undesirable.

I use the autofilter method on the combo so that when you type something, it automatically filters the list and only shows you matching rows.
With the introduction of the top row that has a value of &#160, when you open the combo - do not select or type anything - then close the combo, it automatically selects the first row in the combo.
When you open the combo back up again, the combo appears to be empty.
This is because the combo is now being autofiltered with the &#160 character (which does not match any rows in the list other than the "blank" top row).
You have to delete the &#160 character by pressing the backspace to get the full list again.

I've had to revert to the original <option value="" /> to remove this "feature".

I'm not sure what you can do as I think it's a browser issue.
A <div> element surrounds whatever is inside it.
If the <div> is empty, IE appears to render it differently to Firefox.

The only thing I think you could do is in Firefox, when outputting the <div> in the js is to detect if the <div> is empty.
And if it is, output style="height: Xpx" (where X is the row height) as an attribute of the <div>.
That way, even though the <div> might be empty, at least it would have its height specified and should in theory give the empty <div> some height.