水平滾動條機器人工作在自舉模式

我有一個模態，顯示在'模態身體'的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

水平滾動條機器人工作在自舉模式

回答

相關問題