javascript - gulir horizontal di modal bootstrap

Hai, saya sedang mencoba menambahkan bar gulir horizontal di modal bootstrap. Saya tahu bar gulir horizontal bukan ide yang baik, tetapi dalam kasus saya saya memiliki konten dinamis yang dapat memiliki lebar variabel, jadi saya ingin membuat body modal bisa digulir secara horizontal ketika lebarnya melebihi lebar body modal.

ini yang sudah saya coba

<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;
}

ini adalah fiddle yang telah saya coba.. https://jsfiddle.net/4duq2svh/2/

Setiap bantuan akan sangat dihargai.

Terima kasih sebelumnya.

Jawaban #1

cek 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);

Di sini saya menghitung lebar .scoll-tree menggunakan jQuery untuk membantu munculnya bilah gulir horizontal.

Jawaban #2

Maaf menjawab pertanyaan saya sendiri, saya menyelesaikannya dengan menghitung lebar div scroll-tree berdasarkan jumlah list-group di dalamnya, karena satu list group memiliki lebar 180px, lebarnya akan menjadi 180 * jumlahItem. Berikut adalah kodenya:

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