This is a migrated thread and some comments may be shown as answers.

Radcombobox checkbox not aligning with text

6 Answers 724 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Accepted

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.

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

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