style issue for multi-column combo box with selections

[Bin]

hi,

I am running into a style issue for multi-column combo box with selections. The checkbox and corresponding item are in two lines. (see attached). Here is my code:

 

<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.MultiColumnCombo.DefaultCS"
    Language="c#" MasterPageFile="~/MasterPage.master" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link rel="stylesheet" type="text/css" href="styles.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceholder1" runat="Server">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Label1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="demo-container size-narrow">
        <h2>Grid-like multi-column:</h2>
        <telerik:RadComboBox runat="server" ID="RadComboBox1" Height="190px" Width="460px" CheckBoxes="true"
            MarkFirstMatch="true" DataSourceID="SessionDataSource1" EnableLoadOnDemand="true"
            HighlightTemplatedItems="true" OnClientItemsRequested="UpdateItemCountField"
            OnDataBound="RadComboBox1_DataBound" OnItemDataBound="RadComboBox1_ItemDataBound"
            OnItemsRequested="RadComboBox1_ItemsRequested" DropDownCssClass="exampleRadComboBox">
            <HeaderTemplate>
                <ul>
                    <li class="col1">Contact Name</li>
                    <li class="col2">City</li>
                    <li class="col3">Title</li>
                </ul>
            </HeaderTemplate>
            <ItemTemplate>
                <ul>
                    <li class="col1">
                        <%# DataBinder.Eval(Container.DataItem, "ContactName") %></li>
                    <li class="col2">
                        <%# DataBinder.Eval(Container.DataItem, "City") %></li>
                    <li class="col3">
                        <%# DataBinder.Eval(Container.DataItem, "ContactTitle") %></li>
                </ul>
            </ItemTemplate>
            <FooterTemplate>
                A total of
<asp:Literal runat="server" ID="RadComboItemsCount" />
                items
            </FooterTemplate>
        </telerik:RadComboBox>
        <br />
        <br />
        <h2>Multiple rows and columns:</h2>
        <telerik:RadComboBox ID="RadComboBox2" runat="server" Height="190px" Width="460px"
            DropDownCssClass="multipleRowsColumns" DropDownWidth="460px" />

        <telerik:RadButton runat="server" ID="Button1" Text="Select" OnClick="Button1_Click"></telerik:RadButton>
        <asp:Label runat="server" ID="Label1" />
    </div>

    <asp:SqlDataSource ID="SessionDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>

    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            function UpdateItemCountField(sender, args) {
                //Set the footer text.
                sender.get_dropDownElement().lastChild.innerHTML = "A total of " + sender.get_items().get_count() + " items";
            }
        </script>
    </telerik:RadScriptBlock>
</asp:Content>

Your help will be greatly appreciated.

[Aneliya Petkova]

Hello Bin,

Please add the following styles to your CSS file:

html .rcbHeader ul,
html .rcbFooter ul,
html .rcbItem ul,
html .rcbHovered ul {
    margin: 0;
    padding: 0;
    width: 90%;
    display: inline-block;
    list-style-type: none;
}

html div.RadComboBoxDropDown .rcbItem > label,
html div.RadComboBoxDropDown .rcbHovered > label {
    display: inline-block;
}

Regards,
Aneliya Petkova
Telerik

[Bin]

Hi Aneliya,

Thanks for your quick response. I just tried that out and it works like a charm.

 Thanks,

 Bin