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

Long text in RadListBox

1 Answer 120 Views

ListBox

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

1 Answer, 1 is accepted

answered on 27 Apr 2012, 07:16 PM

RadListBox-Checkbox-Text.png

Reidfenn:

You can accomplish the proper alignment of the text with your checkboxes in the RadListView with CSS as follows:

<head runat="server">

<title></title>

<style type="text/css">

.childItems .rlbText

{

display: block !important;

vertical-align: middle !important;

}

.childItems .rlbCheck

{

float: left !important;

}

</style>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<div class="title">

Checkboxes only:</div>

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">

<div class="list-panel">

<telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true" Width="200px"

Height="300px" OnClientItemChecking="OnClientItemCheckingHandler">

<Items>

<telerik:RadListBoxItem CssClass="childItems" Text="Arts" />

<telerik:RadListBoxItem CssClass="childItems" Text="Biographies" Checked="true" />

<telerik:RadListBoxItem CssClass="childItems" Text="Children's Books" />

<telerik:RadListBoxItem CssClass="childItems" Text="Computers � Internet" />

<telerik:RadListBoxItem CssClass="childItems" Text="This is a very long, long, long text string here" />

<telerik:RadListBoxItem CssClass="childItems" Text="Cooking" Checked="true" />

<telerik:RadListBoxItem CssClass="childItems" Text="History" />

<telerik:RadListBoxItem CssClass="childItems" Text="Fiction" />

<telerik:RadListBoxItem CssClass="childItems" Text="Mystery" Checked="true" />

<telerik:RadListBoxItem CssClass="childItems" Text="Nonfiction" />

<telerik:RadListBoxItem CssClass="childItems" Text="Romance" />

<telerik:RadListBoxItem CssClass="childItems" Text="Science Fiction " />

<telerik:RadListBoxItem CssClass="childItems" Text="Travel" />

</Items>

</telerik:RadListBox>

I'm attaching a screenshot showing output.

Hope this helps!