17

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:

http://i.imgur.com/bCTCDCq.png?1

Is there a way to set:

  • The max number of items displayed before you have to scroll,
  • The max height of the select/chosen drop down box, or
  • The max height of one of the containing elements

Such that it will appear more like this (it's a photoshop, this is how I want it to look):

https://i.stack.imgur.com/M27ul.png

i.e. no overflow in the dialog window, because there are only 8 items displayed before you have to scroll.

Migwell
  • 18,631
  • 21
  • 91
  • 160
  • 7
    why not have a look at the [documentation](http://harvesthq.github.io/chosen/options.html) and for your max- height: `.chosen-container .chosen-results {max-height:100px;}` which could be found by inspecting the element – Pete Jan 14 '14 at 10:52
  • From the above link, set the width to something less then 100%, and tune it so that the container doesn't "overflow". – user1853181 Jan 14 '14 at 10:53
  • reduce the number of visible items before you scroll. try making it 6 instead of 8. i think the property is `max_selected_options`. – Abhitalks Jan 14 '14 at 10:56
  • @Pete Yeah I think I read that post - the problem is I have no way of knowing what types of element .chosen-container and .chosen-results are, let alone their heirachy – Migwell Jan 14 '14 at 10:56
  • @abhitalks That sets the maximum number of things that can be *selected* but doesn't affect the number of things *displayed* – Migwell Jan 14 '14 at 10:57
  • @Miguel that's what inspect element is for (right click on an element in a decent browser) - it shows you the html and the css applied to the element. If you click on your drop down list and then right click on your options and inspect that element, you will see it is a `ul` and has max height css applied to it, it will also tell you where the style is applied (ie css file it is in and what line number it is on) so you can modify it easily – Pete Jan 14 '14 at 11:02

3 Answers3

31

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

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

Initially I didn't understand this, but this selector is actually applying to classes inside the Chosen (the library generates its own html elements that are seperate from the <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:

  • Add !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.

Community
  • 1
  • 1
Migwell
  • 18,631
  • 21
  • 91
  • 160
1

Miguel's answer didn't work out for me, but instead this did:

.dropdown-menu {
    max-height:250px !important;
    overflow-y: scroll;
}
Kelsey
  • 541
  • 3
  • 11
1

I solved this issue by the following way.

.chosen-container .chosen-results {
    color: #444;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 4px 4px 0;
    padding: 0 0 0 4px;
    max-height: 240px;
   -webkit-overflow-scrolling: touch;
}
Rajkumar R
  • 1,097
  • 8
  • 14