Setting a multiselect Chosen box's height

Question

I'm using Chosen with a multi-select drop down, and would like to set the height of the chosen box to a set size.

I have a chosen box in a dialog with overflow:hidden, and the chosen box is positioned absolutely outside of the container (so that the chosen dropdown pops out of the dialog correctly.) Unfortunately, "position: absolute;" removes it from the flow, and results in no height...making the dialog shrink and the multi-select appear to pop out of it. I can set the parent container to a fixed height, but the multi-select expands as more options are selected, and I'll still run into the same problem on long lists.

Is there a way to set the chosen multi-select to a specific height? Thanks!

Answer 1

Nevermind...figured it out on my own using CSS:

.mycontainer {
    height: 120px;
}

.mycontainer .chzn-container-multi .chzn-choices {
    height: 120px !important;
    overflow-y: auto;
}

.mycontainer is the div that holds the chosen dropdown.

---

Please quit editing the answer. This answer aligns with the version of Chosen that was available 2 years ago when I originally asked the question. For those people who are using newer versions (i.e. 1.4.2), you can try changing the "chzn" prefix in the above CSS to "chosen"...but no guarantees this will work (I haven't looked at their new styling.)

Answer 2

.chzn-container .chzn-results { max-height: 150px; }

Answer 3

I was able to solve the list height in the below css class:

.chzn-container .chzn-results {
height: 150px;}

and I got the scroll for the remaining the list.

Answer 4

All of the other answers work, but I believe this is the most elegant solution: Set a new maximum height for .chzn-results (e.g. 150px). All the relevant other blocks will follow. This way the dropdown will not be too big with only a few results.

.chzn-results {
   max-height: 150px;
}

If you really want a fixed height, even with few results, simply use the following code:

.chzn-results {
   height: 150px;
}

(Add !important to line if you need to override chosen.css's behaviour)