Question

21

horizontal scroll in bootstrap modal

rated 0 times [ 28] [ 7] / answers: 1 / hits: 24204 / 9 Years ago, mon, june 8, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradleymoisesy

Add To Favorites

Follow

Total Points: 121

Total Questions: 105

Total Answers: 95

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

bradleymoisesy questions

1 which data type to use to expect date value in jest

Wed, Dec 22, 21, 00:00, 3 Years ago

1 React/Next.js doesn't seem to work with Apexcharts

Tue, Jun 1, 21, 00:00, 3 Years ago

1 React chart : prevent chart's canvas scaling with height and width

Mon, Feb 1, 21, 00:00, 3 Years ago

1 How to create Create an Excel File with javascript?

Thu, Jun 11, 20, 00:00, 4 Years ago

1 How to create a search filter using Vue js from API Data?

Thu, Jan 16, 20, 00:00, 4 Years ago

View All

answered 9 Years ago mickaylag · Accepted Answer

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>