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