Joe the Coder Joe the Coder - 5 months ago 38
jQuery Question

Setting a multiselect Chosen box's height

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!


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