Hi i am trying add a horizontal scroll bar in bootstrap modal. I know horizontal scroll bars are not a good idea but in my case i have dynamic content which can have variable width so i want to make modal body scroll-able horizontally when width exceed modal body's width.
here is what i have tried
<div class="modal-header">
<h3 class="modal-title">Decomposition</h3>
<div class="modal-body">
<div class="scoll-tree">
<div class="list-group" ng-repeat="item in items">
<a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
</div>
</div>
</div>
CSS:
.modal-body {
max-width: 900px;
overflow-x: auto;
}
here is the fiddle what i have tried.. https://jsfiddle.net/4duq2svh/2/
Any help is appreciated.
Thanks in advance.
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.
You can also create a scrollable modal that allows scroll the modal body by adding . modal-dialog-scrollable to . modal-dialog .
Use the . modal-dialog-scrollable class to enable scrolling inside the modal.
check https://jsfiddle.net/4duq2svh/3/
HTML
<div class="modal-body">
<div class="scoll-tree">
<div class="list-group" ng-repeat="item in items">
<a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
</div>
</div>
</div>
CSS
.modal-body {
max-width: 100%;
overflow-x: auto;
}
.scoll-tree {
width:5000px;
}
JS
var totalwidth = 190 * $('.list-group').length;
$('.scoll-tree').css('width', totalwidth);
Here I am calculating .scoll-tree
width using jQuery to help horizontal scroll bar appear.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With