CODEWITHSUNDEEP
jqueryjquery-chosen
Joe the Coder
Joe the Coder

Reputation: 1825

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!

Upvotes: 18

Views: 37855

Answers (6)

Nikhil VJ
Nikhil VJ

Reputation: 6112

as of v1.8.3, this works:

.chosen-container .chosen-results {
    max-height: 60vh;
}

I'll recommend using vh instead of px : renders it as a % of available screen height, so it won't flow out of the screen.

Upvotes: 1

Joe the Coder
Joe the Coder

Reputation: 1825

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

Upvotes: 21

p.matsinopoulos
p.matsinopoulos

Reputation: 7810

This is what did the trick for me:

.mycontainer .chosen-choices {
  max-height: 150px;
  overflow-y: auto;
}

You basically want to limit the height of the ul that holds the options.

Upvotes: 2

Jasper Schulte
Jasper Schulte

Reputation: 7361

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)

Upvotes: 2

ozgrozer
ozgrozer

Reputation: 2042

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

Upvotes: 3

Praveen
Praveen

Reputation: 56509

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.

Upvotes: 2

Related Questions