How can I have an element with “overflow-y: auto” but still allow the browser to scroll when i drag an item horizontally using jquery ui sortable?

Question

I have a webpage that uses jquery ui sortable. I have a list of of columns where each column has an html table in it. I am using jquery ui sortable to support dragging table rows within a table as well as from one table to another similar to this jquery ui sortable demo (but with many more columns)

The one issue i ran into is that if i have many columns, I can't seem to support both of these requirements below at the same time:

1. The requirement to have vertical scrollbar in my table if it exceeds a certain size to avoid a overall page vertical scroll bar

2. For "wide" pages with many lists I do want a horizontal scroll bar (to avoid wrapping) but when I drag something all of the way to the right, i would like the horizontal scroll bar to scroll along with me so I can drag an item from the first list to the last list all the way to the right without having to directly click on the horizontal scroll bar.

It seems #2 comes out of the box (as per the jsFiddle below) but if i try to get #1 working, it breaks #2. I know its possible at some level as i see sites (like trello for example) that support both requirements above but i can't figure out how they are doing it.

Here is my css:

#allLists {
bottom: 12px;
left: 0;
position: absolute;
right: 0;
top: 10px;
white-space: nowrap;
}

.swimTableTbody {
 display: block;
 overflow: auto;  //this is what allows me to have vertical scroll bars on long tables
 width: 100%;
}

.list {
display: inline-block;
width: 300px;
top: 80px;
position: relative;
}

Here is my jquery code:

        $(".sortable").sortable({
            connectWith: ".sortable",
            placeholder: "ui-state-highlight",
            scroll: true,
            helper: function(e, tr)
            {
                var $originals = tr.children();
                var $helper = tr.clone();
                $helper.children().each(function(index)
                {
                    $(this).width($originals.eq(index).width());
                });
                $helper.css("background-color", "rgb(223, 240, 249)");
                return $helper;
            }
        });
        $("#sortable").disableSelection();

and here is a snippet of my HTML to show what i am rendering:

<div id="allLists">

<span class="list">
<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

    </tbody>
</table>

</span>

<span class="list">

<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

        <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content</td>
        </tr>
    </tbody>
</table>
</div>

Update

As pointed out below, I am able to get #2 above working out of the box by removing this line

   overflow: auto;   // remove this line

from this css:

 .swimTableTbody {
   display: block;
   overflow: auto;   // remove this line
   width: 100%; 
 }

but if i do that, i break #1 from working and instead of getting the vertical scrollbar in my individual tables, i get a vertical scroll bar for the whole page which is something i don't want.

Answer 1

Using the helper function seems to solve the horizontal scroll issue.

$(function () {
    $(".connectedSortable").sortable({
        connectWith: ".connectedSortable",
        start: function (event, ui) {
             $('body').scrollParent();
        },
        helper: function (e, tr) {

                var $helper = tr.clone();

                 $('#board').append('<div id="clone" style="padding:4px 3px;border:1px solid #DBDBDB;background-color:rgb(223, 240, 249)">' + $helper.html() + '</div>');
                 $("#clone").hide();
                 setTimeout(function () {
                     $('#clone').appendTo('body');
                     $("#clone").show();
                 }, 1);
                 return $("#clone");

        }
    }).disableSelection();
});

Work Example: http://jsfiddle.net/9kFu8/3/

via jQueryUI sortable and draggable target won't scroll horizontally for drop but will for sort

Answer 2

I made a fiddle with your code and it recreates the problem for me. http://jsfiddle.net/52gaw/

Here is the fiddle with just one line removed. http://jsfiddle.net/52gaw/1/

.swimTableTbody {
    display: block;
    overflow: auto;   // remove this line
    width: 100%;
}

The issue is caused by the overflow: auto; line. Just remove it and it works like you want.