Edit this page

Scroll Items Horizontally

By default, the item's text is wrapped so the horizontal scrollbar does not appear if the text is long enough to go outside the listbox borders:

No scroll

This article shows how to make the text of the items lie on one line thus showing the horizontal scrollbar. Here is the declaration:

<telerik:RadListBox RenderMode="Lightweight" ID="list1" runat="server"
   Width="130px" Height="200px" Skin="Office2007">
       <telerik:RadListBoxItem Text="ASP.NET AJAX UI Controls" />
       <telerik:RadListBoxItem Text="WinForms UI Controls" />
       <telerik:RadListBoxItem Text="WPF UI Controls" />
       <telerik:RadListBoxItem Text="Telerik Web UI Test Studio" Selected="true" />
       <telerik:RadListBoxItem Text="Telerik Open Access ORM" />
       <telerik:RadListBoxItem Text="Sitefinity CMS" />

Add the following CSS rules to the

section of your page:
<style type="text/css">
    div.RadListBox .rlbText
       white-space: nowrap;
       display: inline-block;
   div.RadListBox .rlbGroup
       overflow: auto;
   div.RadListBox .rlbList
       display: inline-block;
       min-width: 100%;
   *+html div.RadListBox .rlbList
       display: inline;
   * html div.RadListBox .rlbList
       display: inline;

Now the listbox will have a horizontal scrollbar:

Horizontal Scrolling

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article