listbox-wrapping-item-text.md

title	description	type	page_title	slug	position	ticketid	res_type
Wrap RadListBoxItem text on a new line	Learn how to wrap the RadListBoxItem text on a new line.	how-to	Wrap ListBox item text on a new line - RadListBoxItem - Telerik Web UI	listbox-wrapping-item-text		1432363	kb

Environment

Product Version	2019.3.917
Product	RadListBox for ASP.NET AJAX

Description

By design when the RenderMode is set to "Lightweight", a horizontal scrollbar will appear when the text of the RadListBox item exceeds the control's width scrollbar appears the available width of the control. This article explains how to wrap the long text on a new line.

Solution for RenderMode="Lightweight":

All you have to do is to apply the following style to the page:

<style>
    .RadListBox .rlbItem{
      white-space:normal
    }
</style>
<telerik:RadListBox runat="server" Width="300px" ID="RadListBox1" RenderMode="Lightweight">
    <Items>
        <telerik:RadListBoxItem Text="Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1" />
        <telerik:RadListBoxItem Text="Item 2" />
        <telerik:RadListBoxItem Text="Item 3" />
        <telerik:RadListBoxItem Text="Item 4" />
    </Items>
</telerik:RadListBox>

Solution for RenderMode="Classic":

The default behavior of the control in this mode is to wrap the long text. If you however prefer the opposite, check out this article.