horizontal scroll in bootstrap modal

Question

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.

You 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? — Kalle, Jun 08 '15 at 11:25
Does this [SO thread](http://stackoverflow.com/questions/23848029/horizontal-scrolling-inside-bootstrap-modal) help with your horizontal scroll. — bbh, Jun 08 '15 at 11:26
@SilverSkin my solution is not working it doesn't show any scroll bar — arsinawaz, Jun 08 '15 at 11:44

Nilesh Mahajan · Answer 1 · 2015-06-08T12:27:34.870

4

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.

edited Jun 08 '15 at 12:27

answered Jun 08 '15 at 11:32

Nilesh Mahajan

3,506
21
34

it did make scroll bar to appear but the modal body and scroll bar not growing with the content. – arsinawaz Jun 08 '15 at 11:46
@arsinawaz: can you make a fiddle showing your prb? – Nilesh Mahajan Jun 08 '15 at 11:47
here you go as you can see it show list-groups in next line instead of showing in one line with a scroll bar https://jsfiddle.net/4duq2svh/2/ – arsinawaz Jun 08 '15 at 12:04

score 2 · Accepted Answer · answered Jun 08 '15 at 12:33

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>

horizontal scroll in bootstrap modal

2 Answers2