ComboBox with highlighted empty row

[dhuss]

I have a radComboBox that I populate with data from a datatable. We do not allow custom text, so the first record is blank in case a user doesn't want to save any data from the comboBox. If the comboBox is loaded with items in the aspx page:

<telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="false" MarkFirstMatch="true"
    Width="100px" DropDownWidth="150px" MaxHeight="350px" NoWrap="true" HighlightTemplatedItems="true"
    ExpandDirection="Down">
    <Items>
        <telerik:RadComboBoxItem Text=" " Value="" />
        <telerik:RadComboBoxItem Text="Female" Value="F" />
        <telerik:RadComboBoxItem Text="Male" Value="M" />
        <telerik:RadComboBoxItem Text="Unknown" Value="U" />
    </Items>
</telerik:RadComboBox>

the first highlighted row will have the same height as the rows with data.

If the comboBox is loaded from a datatable, the first row height is about 1/4 the height of the rows with data. See the attached jpg. Is there a way to make all the rows the same height when loaded from a datatable. I did try this with different skins and got the same effect.

<telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="false" MarkFirstMatch="true"
    Width="100px" DropDownWidth="150px" MaxHeight="350px" NoWrap="true" HighlightTemplatedItems="true"
    ExpandDirection="Down">
    <ItemTemplate>
        <table style="width: 110px; text-align: left; font-size: 8pt" cellspacing="0" cellpadding="0">
            <tr>
                <td width="110px">
                    <%#DataBinder.Eval(Container.DataItem, "LookUp_List_Description")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>

The comboBox is actually part of an ascx control used for lookup items and is fully dynamic. All I have to do is set a property for the type of lookup data the box will self load.
  
I am using Telerik.Web.UI version 2011.2.712.35

[Princy]

Hello Dhuss,

You can try the following CSS.

CSS:

<style type="text/css">
 html > body .RadComboBoxDropDown .rcbHovered
{
   min-height: 8px !important;
}
</style>

Thanks,
Princy.

[dhuss]

Princy,
I placed this code in my style sheet as well as trying it directly on the aspx page. Neither place works. I even set the min-height to a much larger value just to make sure 8px was to small. No go. Could the skin that the controls are utilizing override any this setting, or is this a bug?

[Princy]

Hello Dhuss,

If you are using any skin, try the following CSS.

CSS:

html > body .RadComboBoxDropDown_Black .rcbHovered //change skin name accordingly
{
   min-height: 8px !important;
}

Thanks,
Princy.

[Ivana]

Hi Dennis,

I did not manage to reproduce this behavior locally. I have tested the RadComboBox with exactly the same definition as in your post, using the default embedded skin, and everything works as it should.
I have tested it with the version you have specified and with the latest version also.

Could you please, give us a live URL to your web page so we will be able to identity this kind of behavior?

All the best,
Ivana
the Telerik team