Question

我有几个很长的下拉，所以我设置了一个高度，所以我会得到滚动条。我正在使用jquery selectmenu下拉列表。所有下拉都忽略了高度，即使我可以在“开发者”窗口（f12）中看到它并且不会被覆盖。我尝试过几种方式应用它：

CSS：

    .ddl
    {
        width: 310px;
        height: 200px;
    }

或

    .ddl
    {
        width: 310px;
        max-height: 200px;
    }

或

    .ddl
    {
        width: 310px;
        height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

我确信我拥有所需的所有脚本并且顺序正确，因为所有其他jquery ui的东西都在查找，即使在下拉列表中也是如此。只是高度被忽略了。

所有下拉列表都有“ddl”类，这是所有页面的附加页脚：

$(".ddl").selectmenu();

以下是所包含脚本的列表（按顺序）：

    <link href="/Content/site.css" rel="stylesheet"/>
    <link href="/Content/custom.css" rel="stylesheet"/>
    <link href="/Content/h-menu.css" rel="stylesheet"/>

    <link href="/Content/themes/skps/jquery-ui.css" rel="stylesheet"/>
    <link href="/Content/themes/skps/jquery-ui.structure.css" rel="stylesheet"/>
    <link href="/Content/themes/skps/jquery-ui.theme.css" rel="stylesheet"/>

    <link href="/Content/themes/grid/ui.jqgrid.css" rel="stylesheet"/>

    <script src="/Scripts/jquery-1.11.1.js"></script>

    <script src="/Scripts/jquery-ui-1.11.1.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

    <script src="/Scripts/jquery.jqGrid.src.js"></script>
    <script src="/Scripts/grid.locale-en.js"></script>
    <script src="/Scripts/modernizr-2.6.2.js"></script>

如果重要，这是一个ASP MVC4应用程序。这是JSFiddle。这是我的第一个小提琴，所以不确定我是否做得对。 http://jsfiddle.net/battlfrog/jmhwxgom/

我试图让它像这样工作：http://api.jqueryui.com/selectmenu/#method-menuWidget

Answer 1

我知道这有点旧，但我已经发现如何使用CSS做到这一点。您可以直接编辑 jquery-ui.structure.css 文件，也可以将其应用于页面的.css文件。编辑 jquery-ui.structure.css 文件时使用以下内容。 （你可以做更多的事情，但这是获得你想要的效果所需的基本变化。）

.ui-selectmenu-menu .ui-menu {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1px;
    padding-right: 10px;
    width: auto !important;
    max-height: 8.8em;}

请注意，溢出属性已被删除，溢出-y：自动已删除已被添加。
必须使用！important 添加宽度。
您可以使用 height 代替 max-height ，然后将其设置为您希望的高度，但这样做会导致所有选择菜单具有相同的高度，即使它有一个或两个选项（因此在选项列表的底部创建空白区域。使用max-height将确保仅在列表长度超过高度时才使用滚动条。
当您的font-size设置为0.9em时，上面的 max-height 将为您提供列表中显示的5个选项。我将其留给您进行适当的计算，以显示您选择的首选数量。
MSIE以外的浏览器需要 padding-right 属性。虽然我发现MSIE正确调整列表的宽度以适应选项的文本，但Firefox例如没有。添加填充会将边缘的右侧推离文本。不幸的是，使用MSIE也会产生令人不快的效果，导致选项文本右侧出现大的空白区域。这里的一些MSIE CSS黑客可以解决问题，但我只是想解决核心问题。

如果您希望全局编辑 jquery-ui.structure.css 文件。我发现这是一个更好的解决方案，因为我可以通过为每个受影响的页面应用不同的 max-height 属性来微调每页的高度（我自己将css文件转换为Sass，使事情变得更容易）。

jquery ui下拉忽略高度

1 个答案: