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

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.


Do you mean the row in the option list ?


In this case please check that the xml doesn’t contain blank options. Possibly a server-side script generate xml with a black option.


If problem still persits, please sent us the sample where it can be recreated.

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:

This is as I would have expected.

It’s just when this gets converted into the html by dhtmlxCombo, the

that is generated has no height when rendered in Firefox - I think this is because the
has no content.
But when rendered in IE, the blank row is the same height as all other non-blank rows beneath it.


The blank option can be added as follows:




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:
<![CDATA[ ]]> in the xml generated on the server (ie the < and > get encoded).

I’ve tried   without the CDATA bit but that doesn’t work.

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


The CDATA is used correctly in the example. You can also try to use the following approach:


 

  worked whereas   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 to remove this “feature”.

I’m not sure what you can do as I think it’s a browser issue.
A

element surrounds whatever is inside it.
If the
is empty, IE appears to render it differently to Firefox.

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


In case of filtering you can try to use the approach like as follows:


z.attachEvent(“onChange”,function(){
if(z.getActualValue()==“”)
z.setComboText(“”);
})
It checks the selected option value. If the value is equal to “”, the combo text is replaced with “”.



We have attached the latest combo version. Please, try to use it instead of the original one.


dhtmlxcombo.zip (9.14 KB)

I’m having a similar problem adding a blank row to combo box using “options” setting

{type:“combo”, name: “license_status”, label: “Status:”, inputWidth:150, options:[
{text: “”, value: “”},
{text: “Valid”, value: “Valid”},
{text: “inValid”, value: “inValid”},
{text: “Expired”, value: “Expired”},
{text: “Cancelled”, value: “Cancelled”}
], validate: “NotEmpty”},

First option shows as few pixels high and both   and   do not work.