水平滚动条机器人工作在自举模式

我有一个模态，显示在'模态身体'的div。水平滚动条机器人工作在自举模式

<div class="modal-body"> 
    <div class="scoll-tree"> 
     <div class="history"> 
      Report Event Details 
     </div> 
     <div class="history"> 
      Report Event Details 1 
     </div> 
     <div class="history"> 
      Report Event Details 2 
     </div> 
     <div class="history"> 
      Report Event Details 3 
     </div> 
    </div> 
</div>

设置类波纹管：

.scoll-tree{ 
    width: 400px; 
    height:80px; 
    overflow-x: scroll; 
} 

.history { 
    background: rgba(255, 255, 255, 0.7); 
    float: left; 
    min-width: 5em; 
    width: 25ex; 
    max-height: 3em; 
    margin: 2em; 
    padding: 1em; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 16px; 
    box-shadow: 2px 5px 5px rgba(0,0,0,0.2); 
    vertical-align: central; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

我想水平滚动条'scoll-tree'容器，当'history' DIV超过宽度。

目前它给垂直滚动条，我只想要水平滚动条。

https://jsfiddle.net/hemantmalpote/4duq2svh/35/

来源

2017-06-07 Hemant Malpote

入住这https://jsfiddle.net/t9tr2kqz/ – XYZ

@XYZ：你给了相同的小提琴。它只是让垂直滚动条不是水平的。 –

删除或增加scoll-tree类的高度以避免@ XYZ最新提琴中的垂直滚动 –

那么不能确定它是否是你在找什么，但检查https://jsfiddle.net/4duq2svh/44/。我改变了你的CSS点点，

.modal-body { 
    width: 400px; 
    overflow-x: scroll; 
} 
.scoll-tree{ 
    width: 800px;//ideally you it is better to make js script which will calculate this value 
    height:80px; 
}

来源

2017-06-07 07:45:39 Angelzzz

非常简单 - 只需使用的最大宽度代替宽度 &设置overflow-x: auto。因此，这将是 -

.scoll-tree{ 
    max-width: 400px; 
    height:80px; 
    overflow-x: auto; 
}

您可能首先将其设置为200像素，用于测试是否滚动出现与否。

来源

2017-06-07 08:29:34

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     
 
     
 
    <div style="height:100px; width:100px; overflow-x:auto"> 
 
Content1 
 
Content2 
 
Content3 
 
Content4 
 
Content5 
 
Content6 
 
Content7 
 
Content8 
 
Content9 
 
Content10 
 
</div> 
 

 

 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

来源

2017-06-07 09:03:24

水平滚动条机器人工作在自举模式

回答

相关问题