title: Bootstrap 3 - drag element horizontal with vertical scrollbar, overflow-y: scroll
body: <p>After my lack of success with my <a href="https://stackoverflow.com/questions/23586926/bootstrap-grid-with-scrollable-affixed-column?noredirect=1#comment36201546_23586926">previous post</a>, I followed a suggestion and used Bootstrap's Dashboard example as a base, unfortunately with no success.</p>
  
  <p>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. <a href="http://tobiaskliem.de/images/normal.png" rel="nofollow noreferrer">This screenshot shows the concept.</a></p>
  
  <p>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. <a href="http://tobiaskliem.de/images/drag_problem.png" rel="nofollow noreferrer">This screenshot at the moment when I am dragging the fourt panel from above shows the problem.</a></p>
  
  <p>Here is a streamlined version of the code:</p>
  
  <p>CSS:</p>
  
  <pre><code>&lt;link href="/static/css/bootstrap.css" rel="stylesheet" media="screen"&gt;
  &lt;style type="text/css"&gt;
      body {
          padding-top: 60px;
          padding-bottom: 40px;
      }
  
      @media (min-width: 768px) {
        .sidebar {
          position: fixed;
          top: 51px;
          bottom: 0;
          left: 0;
          z-index: 1000;
          padding: 20px;
          overflow-y: auto;
        }
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-4 col-md-3 sidebar"&gt;
              &lt;div class="unsortedList panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;
                      Not assigned
                  &lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;ul id="0" class="list-unstyled connectedLists"&gt;
                          &lt;li class="panel panel-primary innerpanel" id="student_1_id"&gt;
                              &lt;input type="hidden" name="student_1_id" value="0"&gt;
                              &lt;div class="panel-body"&gt;
                                  Student 1 Name
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="panel panel-primary innerpanel" id="student_2_id"&gt;
                              &lt;input type="hidden" name="student_2_id" value="0"&gt;
                              &lt;div class="panel-body"&gt;
                                  Student 2 Name
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main"&gt;
              &lt;div class="col-md-4 col-sm-4 col-xs-5" id="panel_1"&gt;
                  &lt;div class="panel panel-default outerpanel"&gt;
                      &lt;div class="panel-heading"&gt;
                          Group 1
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;ul id="1" class="list-unstyled connectedLists"&gt;
                              &lt;li class="panel panel-primary innerpanel" id="student_3_id"&gt;
                                  &lt;input type="hidden" name="student_3_id" value="1"&gt;
                                  &lt;div class="panel-body"&gt;
                                      Student 3 Name
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4 col-sm-4 col-xs-5" id="panel_2"&gt;
                  &lt;div class="panel panel-default outerpanel"&gt;
                      &lt;div class="panel-heading"&gt;
                          Group 2
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;ul id="2" class="list-unstyled connectedLists"&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The (functioning and simplified) Javascript code:</p>
  
  <pre><code>$(document).ready(function(){
  
      jQuery(function(event, ui) {
          $('.connectedLists').sortable({
              connectWith: ".connectedLists",
              stop: function(event, ui) {          
                  item = ui.item;
                  var newList = item.closest("ul");
                  var group = newList.attr('id');
                  var formField = item.find("input");
                  formField.val(group);
              },
          });
      });
  };
  </code></pre>
  
  <p>Is there a way I can stop the sidebar from expanding when dragging? Thanks for looking through this mess!</p>