Slider makes page scroll

5 posts, 0 answers
  1. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 08 May 2007 Link to this post

    I have implemented a slider in my page and it works great until someone holds down the mouse and scrolls outside of the window.  I have tested it on Firefox 2(.0.0.3) and IE 7.  It doesn't seem to happen in IE.

    The problem only seems to happen in FF and when the browser is not the full screen.  I have even tried it in the online examples and it happened there too.  If you grab the drag handle and pull it up/down/left/right past the end of the track, it will scroll the page.

    The reason why this is a big issue in my application is because I have set the page to not show scroll bars.  Once the page scrolls, it moves the content off the page and the user can't get it back unless they drag the handle the opposite way past the end of the track.

    I don't think I will need to post code with this one because it happens with the example.

    Shawn
  2. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 09 May 2007 Link to this post

    I just had it happen in IE7, so I guess it does affect that browser too.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 10 May 2007 Link to this post

    Hi Shawn,

    Due to the specifics about how the slider works it will be hard to avoid this behavior. It is the same as if you try to drag a normal image in your browser.

    As a workaround you can set the following definitions in the <BODY tag:
    <body scroll="no" style="overflow:hidden" ...

    Hope this helps. Let us know how it goes.

    Sincerely yours,
    Valentin.Stoychev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. hacker
    hacker avatar
    78 posts
    Member since:
    Nov 2006

    Posted 10 May 2007 Link to this post

    I had the overflow:hidden already set, but the scoll="no" seemed to help.

    It will still allow the page to be dragged, but when the visitor releases the mouse button, it pops back to the original screen position.  I can live with this.

    One more thing... 

    Is there any way to increase the width of the clickable area on the track?  I noticed that when you are clicking on the track to move the drag bar to a specific location, you have to be right in the centre of the graphic.  It would be nice to have a wider area that a visitor can click.

    Shawn
  6. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 11 May 2007 Link to this post

    Hi soatley,

    To increase the height of the clickable are you should modofy the skin of the slider or to overwrite the .track selector
    and set the appropriate height

    This is the style definition which should be changed:
    .RadSlider_Default.horizontal .track  
    {  
        left: 11px; top: 0;  
        height: 2px;  
        margin-top: 9px;  
        background: #fff url(<%=WebResource("Telerik.Web.UI.Skins.Default.Slider.TrackBgr.gif') repeat-x left bottom;  
        border-top: solid 1px #dfdfdf;  
        border-bottom: solid 1px #bbb;  

    Hope that helps.

    Sincerely yours,
    Valentin.Stoychev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017