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:
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.
tl;dr: Add this CSS rule to your styles.css:
.chosen-container .chosen-results {
max-height:100px;
}
<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:
!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.