Radcombobox checkbox not aligning with text

7 posts, 1 answers
  1. Ruby
    Ruby avatar
    9 posts
    Member since:
    Sep 2012

    Posted 10 Sep 2012 Link to this post

    I am working with Radcombobox in vb.net. The checkboxes in  the Radcombobox are not aligned properly with the text of the combobox
    Here is my code. I am also using IE 8. Please help
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="testme.aspx.vb" Inherits="testme" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .rcbHeader ul, .rcbFooter ul, .rcbItem ul, .rcbHovered ul, .rcbDisabled ul
            {
                display: inline-block;
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
              
            .col1, .col2, .col3
            {
                float: left;
                width: 30px;
                margin: 0;
                padding: 0 5px 0 0;
                line-height: 14px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="220px" EnableCheckAllItemsCheckBox="true"
                CheckBoxes="true" DropDownWidth="500px">
                <ItemTemplate>
                    <ul>
                        <li class="col1" style="width: 420px">
                            <%# DataBinder.Eval(Container.DataItem, "Customer")%></li>
                        <li class="col2">
                            <%# If(DataBinder.Eval(Container.DataItem, "hasJOnly"), "J", "")%><%# If(DataBinder.Eval(Container.DataItem, "hasJM"), "JM", "")%><%# If(DataBinder.Eval(Container.DataItem, "hasJOnly")=False and DataBinder.Eval(Container.DataItem, "hasJM")=false, "N/A", "")%></li>
                    </ul>
                </ItemTemplate>
                <Items>
                </Items>
            </telerik:RadComboBox>
        </div>
        </form>
    </body>
    </html>
  2. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 14 Sep 2012 Link to this post

    Hello, Ruby.

    I am attaching one way things could be aligned -- I am using inline block and vertical align.

    Of course, that's just a basic case. In the event you need more than just columns, say borders or anything else, the example might need to be tweaked.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ruby
    Ruby avatar
    9 posts
    Member since:
    Sep 2012

    Posted 19 Sep 2012 Link to this post

    Thanks for your help Ivan, that resolved my issue.
  5. Alex
    Alex avatar
    16 posts
    Member since:
    Nov 2012

    Posted 12 Aug 2013 Link to this post

    i tried this but it didn't work for me. i tested in internet explorer 10 & chrome. i am also attempting to place an image next to the checkbox instead of text. is there anything else i can try?
  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 15 Aug 2013 Link to this post

    Hi Alex,

    For IE10 and Chrome try to replace the existing css with the following:
    <style type="text/css">
        .rcbHeader ul,
        .rcbFooter ul,
        .rcbItem ul,
        .rcbHovered ul,
        .rcbDisabled ul {
            display: inline-block;
            margin: 0;
            padding: 0;
            list-style-type: none;
            vertical-align: middle;
        }
        .col1, .col2, .col3 {
            width: 50px;
            display: inline-block;
        }
     
     
        html .RadComboBoxDropDown .rcbItem > label,
        html .RadComboBoxDropDown .rcbHovered > label,
        html .RadComboBoxDropDown .rcbDisabled > label,
        html .RadComboBoxDropDown .rcbLoading > label,
        html .RadComboBoxDropDown .rcbCheckAllItems > label,
        html .RadComboBoxDropDown .rcbCheckAllItemsHovered > label {
            display: inline-block;
        }
    </style>

    Regards,
    Hristo Valyavicharski
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  7. Kunal
    Kunal avatar
    6 posts
    Member since:
    Aug 2014

    Posted 28 Jul 2015 Link to this post

    Hi Ivan/Hristo,

    I was also facing the same alignment issue ,thanks your solution worked for me, but the mouse hover does not change the checkbox color inside rad combobox after implementing css.

     

     

  8. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 31 Jul 2015 Link to this post

    Kunal,

    Try using this:
    <style type="text/css">
        .rcbHeader ul,
        .rcbFooter ul,
        .rcbItem ul,
        .rcbHovered ul,
        .rcbDisabled ul {
            display: inline-block;
            margin: 0;
            padding: 0;
            list-style-type: none;
            vertical-align: middle;
        }
        .col1, .col2, .col3 {
            width: 50px;
            display: inline-block;
        }
     
        html .RadComboBoxDropDown .rcbItem > label,
        html .RadComboBoxDropDown .rcbHovered > label,
        html .RadComboBoxDropDown .rcbDisabled > label,
        html .RadComboBoxDropDown .rcbLoading > label,
        html .RadComboBoxDropDown .rcbCheckAllItems > label,
        html .RadComboBoxDropDown .rcbCheckAllItemsHovered > label {
            display: inline-block;
        }
     
        .rcbItem:hover {
            background-color:red;
        }
    </style>


    Regards,
    Hristo Valyavicharski
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017