I am in the process of developing a web application that features two full-height columns utilizing Flexbox in Bootstrap v4. Each column contains a sortable list that can be rearranged using jQuery UI Sortable.
HTML:
<div class="container-fluid h-100 d-flex flex-column p-0">
<div class="row flex-grow-1 p-3">
<div class="row flex-grow-1 p-3">
<div class="col-4 mh-100 full-height-col">
<ul class="list-group sortable-container sortable-connect">
<li class="list-group-item">Item 1</li>
</ul>
</div>
<div class="col-8 mh-100 full-height-col">
<div class="row">
<div class="col-4 mb-3">
<ul class="list-group sortable-container sortable-connect">
<li class="list-group-item">Item A</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
}
.sortable-container {
min-height: 2rem;
}
.full-height-col {
overflow-y: scroll;
overflow-x: hidden;
}
JS
$(function() {
$(".sortable-connect").sortable({
connectWith: ".sortable-connect"
}).disableSelection();
});
When I move an item from the left list to the right list, the div starts scrolling horizontally and other items go out of view.
Check out the JSFiddle here.
Anyone know how to prevent horizontal scrolling on the left list?