引导模式中的水平滚动答案

【问题标题】：horizontal scroll in bootstrap modal引导模式中的水平滚动
【发布时间】：2015-06-08 11:23:07
【问题描述】：

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

这是我尝试过的

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

感谢任何帮助。

提前致谢。

【问题讨论】：

您描述了您尝试过的内容，但没有描述结果——如果有的话。它看起来怎么样？实际问题是什么？您的示例是否部分工作？一点也不？
这SO thread 对您的水平滚动有帮助吗？
@SilverSkin 我的解决方案不工作它不显示任何滚动条
@bbh 不，这个问题是在谈论其他事情
@arsinawaz，您能否在您的代码中添加一个 jsfiddle。

标签： javascript html css twitter-bootstrap angular-bootstrap

【解决方案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;
}

var totalwidth = 190 * $('.list-group').length;

$('.scoll-tree').css('width', totalwidth);

这里我正在使用 jQuery 计算.scoll-tree 的宽度以帮助出现水平滚动条。

【讨论】：

它确实使滚动条出现，但模态体和滚动条没有随内容增长。
@arsinawaz：你能用小提琴来展示你的prb吗？
在这里你可以看到它在下一行显示列表组，而不是在一行中显示滚动条jsfiddle.net/4duq2svh/2

【解决方案2】：

很抱歉回答我自己的问题，我通过根据内部列表组的数量计算滚动树 div 的宽度来解决它，因为单个列表组的宽度为 180 像素，宽度将为 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>

【讨论】：