jQuery sortable with overflow: hidden; between two lists

Question

I have two lists in which using jQuery sortable i can move the items between them. ``` $( '#productsList, #orderList' ) .sortable({connectWith: '.containerDiv'}) .disableSelection(); ``` However I run into a problem when i want to use custom scroll bar and set `overflow:hidden;` on the two lists. I want them to be with `max-height:400px`. If i set overflow hidden i cant see the items after i drag them outside of one div, If i dont set hidden the list will have default scroll bar. Can anyone suggest a solution. thanks

Accepted Answer

If you remove the style `position:relative` from your lists is seems to work as you want it to.

http://jsfiddle.net/cCDcQ/2/

Edit:

I would have thought that using the appendTo option would fix this issue and I was right. After a bit more fiddling, I got it to work. This way, you can keep the `position:relative` if you need it.

http://jsfiddle.net/cCDcQ/4/

jQuery sortable with overflow: hidden; between two lists

Solution

Problem