使用溢出-X：可見仍然顯示滾動條

Question

我目前使用jQuery-UI的可拖動的互動，我試圖拖動列表項出邊條主面板，然而，拖曳的項目被剪裁和側邊欄呈現一個水平滾動條，儘管有overflow-x：可見集。如何讓側邊欄不會創建滾動條和可裁剪的元素？

拖動前：

拖動後：

代碼：這個片段看起來

.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>

Answer 1

並沒有因此在這裏工作是一個小提琴http://jsfiddle.net/RachGal/51w1c357/相反添加位置：繼承我添加的刷新位置：真（其餘!!!）

$(".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>