Question

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

这是我试过的

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

感谢任何帮助。

提前致谢。

Answer 1

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

这里我使用jQuery计算.scoll-tree宽度以帮助显示水平滚动条。

Answer 2

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

EmbiBISupplierKPIResult_EditArea00001
EmbiBISupplierKPISearch
partyId=E10021&economicAreaPartyIds={DPP_20246, DPP_14726}&economicId={DPP_20246, DPP_14726}&requestedDateSearchType=ACTUAL_WEEK

引导模态中的水平滚动

2 个答案: