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

Scrollbars in radlistbox

8 Answers 496 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Ayesha
Top achievements
Rank 1
Ayesha asked on 18 Nov 2009, 10:29 PM
Hi,

How do I enable vertical and horizontal scrollbars for my radlistbox.
Pls help me with code samples in C#.

Thanks,
ZR

8 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 19 Nov 2009, 11:13 AM
Hello Zaheka,

You should set  Width and Height properties of the listbox and add the following css styles to your page:

<style type="text/css">
    div.RadListBox .rlbText{
        white-space: nowrap;
    }
</style>

in order to prevent text wrapping.

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
gustavo drach
Top achievements
Rank 1
answered on 05 Jan 2010, 03:48 PM
Did you solve your problem? I'm having the same one.
0
towpse
Top achievements
Rank 2
answered on 12 Jan 2010, 02:36 PM
Can anyone follow up on this and confirm whether the proposed answer is expected to work or not?
0
Brian Mains
Top achievements
Rank 1
answered on 13 Jan 2010, 03:27 PM
Hello,

I just verified it in IE 8 and FireFox 3.  Without the white-space nowrap, it will attempt to wrap the text, and show the scrollbar just to scroll the extra white space.
0
Jim Miles
Top achievements
Rank 1
answered on 14 Sep 2010, 08:41 PM
Hi, the style tag works great to disable the word wrap.  However, I have more than one listbox on the page and would like to have the other listbox have the word wrap enabled, can this be done?

Thanks,
-jim
0
T. Tsonev
Telerik team
answered on 17 Sep 2010, 07:32 AM
Hello Jim,

Just mark the RadListBox with a custom CSS class:

<telerik:RadListBox runat="server" ID="RadListBox1" CssClass="noWrapRadListBox">
    ...
</telerik:RadListBox>

<style type="text/css">
    div.noWrapRadListBox .rlbText{
        white-space: nowrap;
    }
</style>

I hope this helps.

Greetings,
Tsvetomir Tsonev
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
Jim Miles
Top achievements
Rank 1
answered on 17 Sep 2010, 01:53 PM
Thanks Tsvetomir!  So simple a caveman can do it!
0
mathieu cupryk
Top achievements
Rank 1
answered on 16 Nov 2012, 09:54 PM

/* Line 26 */
.RadListBox *
{
}

/* Line 26 */
.RadListBox .rlbButtonText
{
  position: relative;
  display: inline-block;
  z-index: 1;
  padding-left: 20px;
  padding-top: 3px;
  line-height: 15px;
  background-color: transparent;
  text-align: left;
}

/* Line 29 */
.RadListBox_Default .rlbText, .RadListBox_Default .rlbItem, .RadListBox_Default .rlbButtonText, .RadListBox_Default .rlbEmptyMessage
{
  font-size: 12px;
  font-family: "Segoe UI",Arial,sans-serif;
  color: #333333;
}

/* Line 29 */
.RadListBox_Default .rlbButtonText
{
  background-color: transparent;
  background-image: url("/WebResource.axd?d=vxamXpVUhrCH0poTowDzJjfw4F5JOSjyNYR1aqrjEy9ZJBiHR2OasR9lcAEeI0YMSSH9u1lLqVqqHlrnNgkwYW70Z-55r7n4ik6DYgCk08mcTviuV4ccGkF7fdqgV1gy8QNC-o_3n05NvEheyE8M0SMEXcwa-vQGodNj1YeLuyQ1&t=634861472300000000");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0% 0%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
}

/* Line 26 */
.RadListBox .rlbNoButtonText .rlbButtonText
{
  padding-left: 18px;
  width: 0px;
  font-size: 0px;
}

/* Line 26 */
.RadListBox .rlbNoButtonText .rlbButtonText
{
}

/* Line 29 */
.RadListBox_Default .rlbDisabled .rlbButtonText, .RadListBox_Default .rlbDisabled:hover .rlbButtonText
{
  color: #888888;
}

/* Line 29 */
.RadListBox_Default .rlbButton:hover .rlbButtonText
{
  color: #ffffff;
}

/* Line 29 */
.RadListBox_Default .rlbDisabled .rlbButtonText, .RadListBox_Default .rlbDisabled:hover .rlbButtonText
{
  color: #888888;
}

/* Line 29 */
.RadListBox_Default .rlbButtonAreaRight .rlbTransferToDisabled .rlbButtonText, .RadListBox_Default .rlbButtonAreaLeft .rlbTransferFromDisabled .rlbButtonText, .RadListBox_Default .rlbButtonAreaLeft .rlbTransferFromDisabled:hover .rlbButtonText, .RadListBox_Default .rlbButtonAreaRight .rlbTransferToDisabled:hover .rlbButtonText
{
  background-position: -200px -100px;
}

/* Line 29 */
.RadListBox_Default .rlbButtonAreaRight .rlbTransferToDisabled .rlbButtonText, .RadListBox_Default .rlbButtonAreaLeft .rlbTransferFromDisabled .rlbButtonText, .RadListBox_Default .rlbButtonAreaLeft .rlbTransferFromDisabled:hover .rlbButtonText, .RadListBox_Default .rlbButtonAreaRight .rlbTransferToDisabled:hover .rlbButtonText
{
  background-position: -200px -100px;
}


Not sure this will help but the button is overlaping with radlistbox.
Tags
ListBox
Asked by
Ayesha
Top achievements
Rank 1
Answers by
Yana
Telerik team
gustavo drach
Top achievements
Rank 1
towpse
Top achievements
Rank 2
Brian Mains
Top achievements
Rank 1
Jim Miles
Top achievements
Rank 1
T. Tsonev
Telerik team
mathieu cupryk
Top achievements
Rank 1
Share this question
or