horizontal scroll in bootstrap modal
Solution 1
Sorry to answer my own question, I solved it by calculating the width of scroll-tree div based on number of list-groups inside, as one single list group is 180px wide the width will be 180 * numberOfItems. here is the code:
$scope.getStyle = function(){
var numberOfItems = $scope.tree.length;
return {
width : 200 * numberOfItems + 'px',
overflowX: 'auto'
}
}
<div class="modal-body" style="overflow-x: auto;">>
<div class="scoll-tree" ng-style="getStyle();">
<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>
Solution 2
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.
Related videos on Youtube
arsinawaz
Updated on September 20, 2020Comments
-
arsinawaz almost 4 years
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.
-
Kalle about 9 yearsYou describe what you have tried, but not the results - if any. How does it look? What is the actual problem? Does your example work partially? Not at all?
-
bbh about 9 yearsDoes this SO thread help with your horizontal scroll.
-
arsinawaz about 9 years@SilverSkin my solution is not working it doesn't show any scroll bar
-
arsinawaz about 9 years@bbh no that issue is talking about something else
-
bbh about 9 years@arsinawaz, can you please add a jsfiddle with your code.
-
arsinawaz about 9 yearsplease check the fiddle
-
-
arsinawaz about 9 yearsit did make scroll bar to appear but the modal body and scroll bar not growing with the content.
-
Nilesh Mahajan about 9 years@arsinawaz: can you make a fiddle showing your prb?
-
arsinawaz about 9 yearshere you go as you can see it show list-groups in next line instead of showing in one line with a scroll bar jsfiddle.net/4duq2svh/2