Using overflow-x : visible still shows scrollbar

Question

I am currently using the jQuery-UI's draggable interaction, i am trying to drag list items out of a side bar to main panel, however, the dragged item is clipped and the sidebar renders a horizontal scroll bar despite having overflow-x:visible set. how do i keep the sidebar from creating a scrollbar and the draggable element from being clipped?

Before dragging:

After Dragging:

Code :

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  overflow-x: visible;
  background-color: #f5f5f5;
  white-space: nowrap;
  border-right: 1px solid #eee;
  padding-left: 30px;
  padding-right: 30px;
}


/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}

<div class="common">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="draggable">
              <a href="#" class="list-group-item">
                <span class="badge">dasdsa</span>
                <span class="badge">dsad</span>
                <h4>
                 dsad
                 <br /><small>dsadsa</small>
                 <br /><small>dsadsa</small>
                </h4>
              </a>
            </li>
          </ul>
        </div>

        
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          MAIN PANEL
        </div>
      </div>
    </div>
    </div>

since you're using bootstrap the general template itself could be causing any number of odd behaviors, however this should be working considering you've placed the z-index in there as well, but I'm wondering if it has something to do with the fixed positioning. — Mark Hill, Sep 08 '15 at 14:05
I think your problem is not in the `.sidebar`, I think is in the parents. Please, share more code. — Marcos Pérez Gude, Sep 08 '15 at 14:55
well i have it moving i just can't seem to get it to stick http://jsfiddle.net/RachGal/wsvyrxt8/ — Rachel Gallen, Sep 08 '15 at 16:44
Well the side bar is meant to stay in position as if it was floating, thing works if i added position:inherit in the draggable objects, however, they shrink. — user3414321, Sep 08 '15 at 22:49

Rachel Gallen · Answer 1 · 2015-09-09T00:23:01.697

This snippet doesn't seem to work so here is a fiddle http://jsfiddle.net/RachGal/51w1c357/ Instead of adding position:inherit i added refreshpositions:true (and the rest!!!)

$(".draggable").draggable();
var draggableArguments={
     revert: 'invalid',
     helper:'clone',
     appendTo: '#drophere',
     refreshPositions: true,
     containment: 'DOM',
     zIndex: 1500,
     addClasses: false
};

$('.group').draggable(draggableArguments);
$('.group').droppable();

$(".nav-sidebar").droppable({
    tolerance: "intersect",
    accept: ".group",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $(".nav-sidebar").append($(ui.draggable));
    }
});

$('#drophere').droppable({
    tolerance: "intersect",
    accept: ".group",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $('#drophere').append($(ui.draggable));
    }
});

.draggable {
    border: solid 2px gray;
}
.sidebar {
    position:fixed;
    width:200px;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-y: auto;
    /* Scrollable contents if viewport is shorter than content. */
    overflow-x: visible;
    background-color: #f5f5f5;
    white-space: nowrap;
    border-right: 1px solid #eee;
    padding-left: 30px;
    padding-right: 30px;
}
/* Sidebar navigation */
  .nav-sidebar {
    margin-right: -21px;
    /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.group{width:150px;
    height:auto;}


#drophere{width:700px;left:200px; height:100vh;}

<link src="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="common">
    <div class="container-fluid">
        <div class="row">
                <ul class="col-sm-3 col-md-2 sidebar nav nav-sidebar" > <li class="group" class="draggable" ><a href="#" class="list-group-item">
                <span class="badge">dasdsa</span>
                <span class="badge">dsad</span>
                <h4>
                 dsad
                 <br /><small>dsadsa</small>
                 <br /><small>dsadsa</small>
                </h4>
              </a>
                    </li>
                </ul>
             <div id="drophere" class="col-sm-9 col-md-9">MAIN PANEL</div>
        </div>
    </div>
   
</div>

Using overflow-x : visible still shows scrollbar

1 Answers1