Help with using slider for simple scroll bar

3 posts, 0 answers
  1. Robert
    Robert avatar
    58 posts
    Member since:
    Dec 2008

    Posted 19 Mar 2009 Link to this post


    I want to create a simple slider that would otherwise take the place of a vertical scrollbar and would show up only when a text string is too large to fit into a specifically sized div.

    I can do this easily enough with CSS as such:

    <div class="text" style="width:200px;height:100px;overflow:auto;" >
    <p>An error message is a message displayed when, etc. etc.<p>

    When the text string is longer than what will fit inside a 200x100 box a slider appears and allows the user to see the remainder of the text by scrolling down.

    Basically all I want to do is replace the default scroll bar with something that looks better.

    I looked at the live example ( but I'm having trouble understanding the sample code provided at the bottom of the page. My experience is heavy in design, XHTML markup, and CSS but light in programming, do I need a developer to help me with this or is there something specific I should read up on that can help me understand how to implement this?

  2. Tsvetie
    Tsvetie avatar
    1517 posts

    Posted 20 Mar 2009 Link to this post

    Hi Robert,
    Basically, you can easily use the implementation in the online demo for a specific area on your page, but it would be difficult to replace all your scrollbars with a RadSlider.

    The idea behind the implementation is the following:
    1. You have a DIV element that holds your content - text in the example. This DIV element should have position - absolute in the example, and top and left set to 0 for the initial view. The idea behind the scrolling in this example is that you change the value of the top/left CSS property.
    2. You have a DIV element that plays the role of a viewport by wrapping the DIV with the content. This DIV should have width and height and overflow:hidden as its content should not stretch it.
    3. You have a RadSlider. When the value of the RadSlider changes, you calculate the new top/left for the content DIV and set it to the DIV: = initialValue2 + 'px' = initialValue + 'px'

    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. Telerik UI for ASP.NET Core is out
  4. Robert
    Robert avatar
    58 posts
    Member since:
    Dec 2008

    Posted 20 Mar 2009 Link to this post

    Hi Tsvetie,

    Thank you for the reply.

    We're only looking to replace one scroll bar that appears in a message box therefore eliminating the need to have a huge message box covering the whole screen when the message is long.

    This should work, thank you!

Back to Top