How to set the maximum height of the selected Select item (jQuery plugin)

Question

I am currently using the Chosen JQuery widget inside the jQuery dialog, and as soon as you open the drop-down list, the size of the drop-down list will overflow the dialog, causing this: (note that there are two scroll bars, one for the drop-down and one for a dialog box that makes scrolling almost useless:

Is there any way to install:

• The maximum number of items displayed before scrolling,
• Maximum height of drop-down list of choice / choice or
• The maximum height of one of the contained elements

To make it look more like this (this is Photoshop, so I want it to look):

i.e. there is no overflow in the dialog box because only 8 items are displayed before scrolling.

Answer 1

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

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

---

At first, I did not understand this, but this selector actually applies to classes inside Chosen (the library generates its own html elements that are separate from the <select> element). They do not apply to the container that you, the developer, set to Favorites, so they will work in any situation.

However, even when I realized that this selector would not work as selected.css has the same selector, and since the last rule declared wins , my rule had no effect. There are two solutions for this:

• Add !important to your custom rule (possibly the wrong way)

OR

• Make sure your styles.css is declared after selected.css. My links were in the following 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 what you called your stylesheet) is declared after , the problem will also be solved.

Answer 2

Miguel's answer did not work for me, but instead he did:

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