HTML選擇框顯示在chrome中的windows任務欄下方

Question

我正在嘗試使用select標簽添加html下拉列表，不幸的是在chrome中我無法選擇選項5和6，因為它們顯示在Windows上的chrome任務欄下方。 如果我添加選項7然后突然顯示上面而不是下面的列表。

此列表將始終更改大小，因此不幸的是，將列表放在更高位置將不是一個選項，因為總有可能隱藏2個選項。 此外，列表中顯示的項目數是在添加滾動條之前是瀏覽器特定的。 查看HTML選擇框的高度（下拉列表）

到目前為止我嘗試過的：

• 當使用jquery和設置列表大小超過4個選項時，嘗試將下拉列表轉換為靜態列表。 然而這非常難看。
• 嘗試使用bootstraps .dropup類但不幸的是這只適用於列表項而不是選擇選項
• 不同的css hacks但是如前所述，列表大小是瀏覽器特定的。

我寧願不添加任何外部庫，並找到一些簡單的Jquery黑客來解決這個問題。 您還可以通過訪問此jsfiddle鏈接並將顯示窗口拖動到屏幕底部來查看我的意思：

  <div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
     <option>6</option>
  </select>
</div>

https://jsfiddle.net/v9t4rm16/

Answer 1

看起來這是一個官方的Chrome錯誤它會影響Chrome版本30-61

我認為沒有正式的工作。

如果您不想等待Chrome修復，那么您可以嘗試：

• 將白色添加到頁面底部，以便選擇具有展開的空間
• 在select本身中添加額外選項以強制chrome向上渲染

Answer 2

對於表單組和表單控件類，將z-index設置為1000