1

我有几个很长的下拉菜单，所以我设置了一个高度，这样我就会得到滚动条。我正在使用 jquery 选择菜单下拉菜单。所有下拉菜单都忽略了高度，即使我可以在“开发者”窗口（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

4

1 回答 1

0

我知道这有点老了，但我发现了如何使用 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;}
  1. 请注意，overflow属性已被删除，而overflow-y: auto已被添加。
  2. 必须使用!important添加宽度。
  3. 您可以使用height而不是max-height然后将其设置为您希望的任何高度，但这样做会导致所有选择菜单具有相同的高度，即使它有一个或两个选项（从而在底部创建空白空间选项列表的. 使用 max-height 将确保滚动条仅在列表长度超过高度时使用。
  4. 当您的字体大小设置为 0.9em 时，上面的max-height将为您提供列表中显示的 5 个选项。我让您自己进行适当的计算，以显示您喜欢的选项数量。
  5. 对于MSIE 以外的浏览器， padding-right属性是必需的。虽然我发现 MSIE 会正确调整列表的宽度以适应选项的文本，但例如 Firefox 就不会。添加填充将边缘的右侧推离文本。不幸的是，使用 MSIE 也会产生令人不快的效果，导致选项文本右侧出现很大的空白区域。这里的一些 MSIE CSS hacking 可以解决问题，但我只想解决核心问题。

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

于 2016-03-30T09:53:48.943 回答