jquery ui dropdown ignoring height

Question

I have a couple long drop downs, so I set a height so I would get scroll bars. I am using the jquery selectmenu dropdowns. All the dropdowns are ignoring the height, even though I can see it in the 'developer' window (f12) and is not overwritten. I have tried to apply it a couple ways:

CSS:

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

or

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

or

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

I am sure I have all the scripts I need and in the correct order, because all the other jquery ui stuff is working find, even on the dropdowns. It is just the height is being ignored.

All the dropdowns have the class of "ddl", and this is in the included footer for all pages:

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

Here is the list (in order) of the included scripts:

    <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>

If it matters, this is an ASP MVC4 app. Here is the JSFiddle. This is my first fiddle, so not sure if I did it right. http://jsfiddle.net/battlfrog/jmhwxgom/

I am attempting to get it to work like this: http://api.jqueryui.com/selectmenu/#method-menuWidget

Rendering of selects is controlled by you browser/operating system and your `.css` has no affect. Refer [this answer](http://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown) for more details — , Oct 28 '14 at 23:28
It now works on the first dropdown of the page only. I think the 'addclass' function only adds the class to the first one. Still researching. — BattlFrog, Oct 29 '14 at 21:30
I am running into the same issue with the addClass function only applying the class to the first selectMenu dropdown. Did you find a workaround for this? — Rachel, Oct 02 '15 at 04:46

score 0 · Answer 1 · answered Mar 30 '16 at 09:53

I know this is a bit old but I've found out how to do this using CSS. You can either edit the jquery-ui.structure.css file directly or apply this in the .css file for your page. The following is used when editing the jquery-ui.structure.css file. (There is a lot more you can do with this, but this is the basic change required to get the effect you want.)

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

Note that the overflow property has been deleted and overflow-y: auto has been added instead.
Width must be added with !important.
You can use height instead of max-height and then set it to whatever height you wish, but doing so will cause all select menus to have the same height, even if it has one or two options (and thus creating empty space at the bottom of the option list. Using max-height will ensure that the scrollbar is only used when the list length exceeds the height instead.
The above max-height will give you 5 options shown in your list when your font-size is set to 0.9em. I leave it up to you to do the appropriate calculations to get your preferred number of options shown.
The padding-right property is required for browsers other than MSIE. While I've found that MSIE adjusts the width of the list properly to accommodate the text for the option, Firefox, for example, does not. Adding the padding pushes the right of the edge away from the text. Unfortunately it has the unpleasant effect of doing it with MSIE as well, causing a large empty area to the right of the option text. A bit of MSIE CSS hacking here would clear up the problem, but I just want to address the core issue.

If you wish this to be global edit the jquery-ui.structure.css file. I find this a better solution because I can then fine tune the height per page by applying a different max-height property for each affected page (I convert the css file into Sass myself, makes things a lot easier).

jquery ui dropdown ignoring height

1 Answers1