水平滚动在引导模式

horizontal scroll in bootstrap modal

本文关键字：模式 滚动 水平      更新时间：2023-09-26

嗨，我正在尝试添加一个水平滚动条在引导模式。我知道水平滚动条不是一个好主意，但在我的情况下，我有动态内容，可以有可变的宽度，所以我想使模态体水平滚动时，宽度超过模态体的宽度。

这是我尝试过的

<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;
}
这是我试过的小提琴。https://jsfiddle.net/4duq2svh/2/

任何帮助都是感激的。

check https://jsfiddle.net/4duq2svh/3/

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

这里我是计算.scoll-tree宽度使用jQuery来帮助水平滚动条出现

抱歉回答我自己的问题，我通过根据内部列表组的数量计算滚动树div的宽度来解决这个问题，因为一个列表组是180px宽，宽度将是180 * numberOfItems。下面是代码:

$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>
相关文章：