Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Radcombobox checkbox not aligning with text

6 Answers 607 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Ruby
Top achievements
Rank 1
Ruby asked on 10 Sep 2012, 10:30 PM
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>

6 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Zhekov
Telerik team
answered on 14 Sep 2012, 08:42 AM
602929----Radcombobox-checkbox-not-aligning-with-text.zip
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.
0
Ruby
Top achievements
Rank 1
answered on 19 Sep 2012, 07:16 PM
Thanks for your help Ivan, that resolved my issue.
0
Alex
Top achievements
Rank 2
answered on 12 Aug 2013, 06:35 PM
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?
0
Hristo Valyavicharski
Telerik team
answered on 15 Aug 2013, 02:54 PM
602929.zip
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.
0
Kunal
Top achievements
Rank 1
answered on 28 Jul 2015, 07:10 AM

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.

 

 

0
Hristo Valyavicharski
Telerik team
answered on 31 Jul 2015, 07:24 AM
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
Tags
ComboBox
Asked by
Ruby
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Ruby
Top achievements
Rank 1
Alex
Top achievements
Rank 2
Hristo Valyavicharski
Telerik team
Kunal
Top achievements
Rank 1
Share this question
or