Long text in RadListBox

2 posts, 0 answers
  1. reidfenn
    reidfenn avatar
    5 posts
    Member since:
    Apr 2012

    Posted 25 Apr 2012 Link to this post

    How does RadListBox handle long text in RadListBox ?

    I have a RadListBox with checkBoxes.  Long text is not getting indented.  It should be left aligned and consistent with the other items which have short text.

    Thank you
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 27 Apr 2012 Link to this post

    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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top