How do you set the max height of an expanded “Chosen” element (jQuery plugin)

Question

At the moment I'm using a Chosen JQuery widget inside a JQuery dialog box, and as soon as you open the dropdown box, the size of the dropdown causes the dialog box to overflow, causing this: (notice that there are two scroll bars, one for the drop down box, and one for the dialog box, which renders scrolling pretty much useless:

Is there a way to set:

• The max number of items displayed before you have to scroll,
• The max height of the select/chosen drop down box, or
• The max height of one of the containing elements

Such that it will appear more like this (it's a photoshop, this is how I want it to look):

i.e. no overflow in the dialog window, because there are only 8 items displayed before you have to scroll.

Answer 1

tl;dr: Add this CSS rule to your styles.css:

.chosen-container .chosen-results {
    max-height:100px;
}

---

Initially I didn't understand this, but this selector is actually applying to classes inside the Chosen (the library generates its own html elements that are seperate from the <select> element) They aren't referring to the container that you, the designer, have put the Chosen in, so they will work in any situation.

However even when I realised that, this selector wouldn't work as chosen.css has the exact same selector, and because the last declared rule wins, my rule had no effect. There are two solutions to this:

• Add !important to your custom rule (probably the incorrect way)

OR

• Make sure your styles.css is declared after chosen.css. My links were in this order:

  <link rel="stylesheet" href="css/main.css">

  <link rel="stylesheet" href="chosen/chosen.css">

  If you change the order so that your main.css (or whatever you've called your custom styles file) is declared after, the problem will also be solved.

Answer 2

Miguel's answer didn't work out for me, but instead this did:

.dropdown-menu {
    max-height:250px !important;
    overflow-y: scroll;
}

Answer 3

I solved this issue by the following way.

.chosen-container .chosen-results {
    color: #444;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 4px 4px 0;
    padding: 0 0 0 4px;
    max-height: 240px;
   -webkit-overflow-scrolling: touch;
}