Scrollbars in radlistbox

9 posts, 0 answers
  1. Ayesha
    Ayesha avatar
    110 posts
    Member since:
    Jun 2009

    Posted 18 Nov 2009 Link to this post

    Hi,

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

    Thanks,
    ZR
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. gustavo drach
    gustavo drach avatar
    1 posts
    Member since:
    Jan 2010

    Posted 05 Jan 2010 Link to this post

    Did you solve your problem? I'm having the same one.
  5. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 12 Jan 2010 Link to this post

    Can anyone follow up on this and confirm whether the proposed answer is expected to work or not?
  6. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 13 Jan 2010 Link to this post

    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.
  7. Jim Miles
    Jim Miles avatar
    22 posts
    Member since:
    May 2006

    Posted 14 Sep 2010 Link to this post

    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
  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 17 Sep 2010 Link to this post

    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
  9. Jim Miles
    Jim Miles avatar
    22 posts
    Member since:
    May 2006

    Posted 17 Sep 2010 Link to this post

    Thanks Tsvetomir!  So simple a caveman can do it!
  10. mathieu cupryk
    mathieu cupryk avatar
    35 posts
    Member since:
    Jul 2012

    Posted 16 Nov 2012 Link to this post

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