我怎样才能确保下拉列表总是下拉而不是上拉呢?

本文关键字:下拉列表 确保 | 更新日期: 2023-09-27 18:12:49

我想显示下拉列表总是向下。(这可能吗?)

如果底部空间小于下拉列表的高度,则显示列表向上。

我想显示列表总是向下。

Thanks in advance

我怎样才能确保下拉列表总是下拉而不是上拉呢?

这可以通过在你的下拉列表的CSS类中添加以下属性来实现:

.drop-down {
    top:100%; 
}

同样可以用来强制列表向上移动:bottom: 100%;

这是一个jsfiddle演示。


编辑:

标准HTML表单Select Option (<select><option> <option></select>)不能被操纵向某个方向展开。你必须用JavaScript编写自己的自定义下拉菜单来实现这个功能。

在快速浏览之后,我注意到其他人也在努力解决你遇到的问题。显然,下面的CSS代码似乎在某些情况下修复了它。

select { vertical-align: top; }

你可以使用jQuery设置attr size,如下所示

jsFiddle: https://jsfiddle.net/ou5n9u3y/

jQuery

$(function () {
    var dropdownOptions = $('.dropdown-selector').find('option').length;
    $('.dropdown-selector').attr('size', dropdownOptions);
});