[Solved] Highlighting Template Item on MultiColumn

[Jeff Reinhardt]

I have a multi-column combobox showing 3 items in the dropdown.  When going to select an item the highlight bar is very thin, bounces around a lot and rarely ends up on the item to be clicked/selected. See attached image.

<telerik:RadComboBox ID="radcmbProduct" runat="server" Width="400px" Height="200px" AllowCustomText="false" EmptyMessage="Select a Product" EnableLoadOnDemand="True" ShowMoreResultsBox="true" DropDownWidth="600px" EnableVirtualScrolling="true" HighlightTemplatedItems="true" MarkFirstMatch="true" NoWrap="true" OnItemsRequested="radcmbProduct_ItemsRequested" OnItemDataBound="radcmbProduct_ItemDataBound">
      <HeaderTemplate>
           <ul>
              <li class="col1">Title</li>
              <li class="col2">System</li>
              <li class="col3">Price</li>
            </ul>
      </HeaderTemplate>
      <ItemTemplate>
            <ul>
               <li class="col1">
                   <%# DataBinder.Eval(Container.DataItem, "Title") %></li>
               <li class="col2">
                   <%# DataBinder.Eval(Container.DataItem, "GameSystemName") %></li>
               <li class="col3">
                   <%# DataBinder.Eval(Container.DataItem, "DisplayPrice")%></li>
            </ul>
       </ItemTemplate>
</telerik:RadComboBox>

[Kalina]

Hi Jeff Reinhardt,

I suppose that this issue is related with some custom CSS styles that you use in your page.

I used your RadComboBox definition and the styles used in this online demo to create a sample for you.
On my side the templated items are highlighted properly - could you please download the sample and give it a try?
If the issue persists - could you please paste here the CSS styles that you use?

Kind regards,
Kalina
the Telerik team

[Jeff Reinhardt]

Not sure why, but it is working now.  The only thing I changed wwas the line-height from 20 to 14 and added the ul CSS style below.

Here are the only styles I had affecting the combo (needed col1 to be wider than the other two):

.col1

{

 

float: left;

 

 

 

width: 400px;

 

 

 

margin: 0;

 

 

 

padding: 0 5px 0 0;

 

 

 

line-height: 14px;

 

}

 

 

.col2, .col3

 

 

{

 

float: left;

 

 

 

width: 50px;

 

 

 

margin: 0;

 

 

 

padding: 0 5px 0 0;

 

 

 

line-height: 14px;

 

}

 

I did not have the one below that you had in your sample and that may have been part of the reason


.rcbHeader

 

ul, .rcbFooter ul, .rcbItem ul, .rcbHovered ul, .rcbDisabled ul

 

 

{

 

width: 100%;

 

 

 

display: inline-block;

 

 

 

margin: 0;

 

 

 

padding: 0;

 

 

 

list-style-type: none;

 

}