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

Sortable panel with scrollbar doesn't scroll

1 Answer 146 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Achilles
Top achievements
Rank 1
Achilles asked on 25 Apr 2014, 05:36 AM
Hi,
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
http://demos.telerik.com/kendo-ui/web/sortable/sortable-panels.html

Is there a way to get the scrollbar to work ?

Regards

Achilles

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 28 Apr 2014, 03:34 PM
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.

$("#main-content").kendoSortable({
    filter: ">div",
    cursor: "move",
    connectWith: "#sidebar",
    placeholder: placeholder,
    hint: hint,
    handler: "h3"
});


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Sortable
Asked by
Achilles
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or