Bootstrap 3 - drag element horizontal with vertical scrollbar, overflow-y: scroll

Question

After my lack of success with my previous post, I followed a suggestion and used Bootstrap's Dashboard example as a base, unfortunately with no success. The aim is a page with a sidebar (col-md-3) that contains panels with all unsorted students (in small panels each), and a main area (col-md-9) that contains different groups (larger panels), in which the students can be dragged and dropped with JQeryUI Sortable. This screenshot shows the concept. This works fine, except for one problem: while the sidebar does not have a horizontal scrollbar (even when selecting "overflow-x: auto"), it seems to become bigger when trying to drag a panel out from it. This screenshot at the moment when I am dragging the fourt panel from above shows the problem. Here is a streamlined version of the code: CSS: ```

Accepted Answer

Ok, this is a tricky problem but there's a little bit of 'hack' that we can do. It's a simple method.

To summarize your issue, you need `overflow-y:scroll` in your container holding the draggable, while you keep `overflow-x:hidden`. But, when you drag, the element still spreads across the container like as if the `overflow-x` had no effect. So here's what we do:

1) We describe the `overflow-y:scroll` property on DOM:

```
$(document).ready(function(){
  $('.sidebar').css('overflow','scroll');
});
```

We can't put this directly on the CSS because we are going to be changing this value later and the CSS default property overrides it.

2)

```
$('.panel-body').mousedown(function(){
  $('.sidebar').css('overflow-y','');
}); 
```

This means, when we select a draggable element (while the mouse is still down), we will hide the vertical scroll, that means both `overflow` won't be true. This is the important part, we know that removing `overflow-y` totally solves the issue but we need a vertical scrollbar. So we hide it only when an element is selected.

3)

```
$('.panel-body').mouseup(function(){
  $('.sidebar').css('overflow-y','scroll');
});
```

Once we have placed the draggable element in the place we wanted it to be, we put our vertical-scrollbar back.

That's it, this may not be a smooth solution since it's only a workaround.

You can have a look at how it works here:

DEMO (updated)

Bootstrap 3 - drag element horizontal with vertical scrollbar, overflow-y: scroll

Solution

Problem