Sortable panel with scrollbar doesn't scroll

2 posts, 0 answers
  1. Achilles
    Achilles avatar
    57 posts
    Member since:
    Jan 2013

    Posted 25 Apr 2014 Link to this post

    I'm designing a dashboard using Sortable panels using your example as a reference. I have a news widget where I don't have control over the height of the content which comes over rss. Hence I've added a scrollbar.
    This works fine, except that when I try to scroll using the slider, it has a drag & drop effect on the whole widget. The arrows at the top & bottom are however working.

    You can see the effect by adding the height & overflow properties to the css ~line 237 as

    /* BLOGS & NEWS */
    #blogs div,
    #news div {
        padding: 0 20px 20px;
        overflow: scroll;
        height: 300px;

    in the example

    Is there a way to get the scrollbar to work ?


  2. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 28 Apr 2014 Link to this post

    Hello Achilles,

    The issue which you described is a known one. I was able to reproduce it in Firefox and IE but not in Chrome. The problem comes from the fact that different browsers throw the events in a different way. Since the scrollbar is not a DOM element we cannot ignore it or determine that the user is currently trying to scroll.

    As a possible solution I can suggest you to use drag handlers. In this way the user will be able to interact with the scrollbar without any issues.
    In case of the example you can make the header a drag handler.

        filter: ">div",
        cursor: "move",
        connectWith: "#sidebar",
        placeholder: placeholder,
        hint: hint,
        handler: "h3"

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top