Chosen.jquery drop-up list

Question

I use jquery-chosen for my comboboxes.

If the combobox is at the bottom of the screen it can not be dropping down. Is there a way to get a list of drop up instead of down?

Link of demo-page: http://harvesthq.github.io/chosen/

So I make combobox without search:

$(".chosen-select").chosen({disable_search_threshold: 10});

Answer 1

It's old, but i've searched for this feature and came across this article. Here is what i have added to Shawn Millers Answer for rounded corners, etc.

jsfiddle

.chosen-container .chosen-drop {
  border-bottom: 0;
  border-top: 1px solid #aaa;
  top: auto;
  bottom: 40px;
}
.chosen-container.chosen-with-drop .chosen-single {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-image: none;
}
.chosen-container.chosen-with-drop .chosen-drop {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: none;
  margin-bottom: -16px;
}

With Twitter Bootstrap the last margin-bottom would be something like -3px.

Answer 2

Thanks Gordon! Just to add to your response, here is another option.

CSS:

.chosen-container .chosen-drop.dropup {
  border-bottom: 0;
  border-top: 1px solid #aaa;
  top: auto;
  bottom: 40px;
}

.chosen-container.chosen-with-drop .chosen-single.dropup {
  background-image: none;
}

.chosen-container.chosen-with-drop .chosen-drop.dropup {
  box-shadow: none;
  margin-bottom: -16px;
}

JS:

$("select[dropup]").next().find(".chosen-drop").addClass("dropup");
$("select[dropup]").next().find(".chosen-single").addClass("dropup");

HTML:

<select id="selChosen" dropup style="width: 250px"></select>

Answer 3

Not a huge fan of the large amount of CSS the Chosen plugin comes with, but I was able to override some styles to make it happen. End result looks like this:

.chosen-container .chosen-drop {
    border-bottom: 0;
    border-top: 1px solid #aaa;
    top: auto;
    bottom: 40px;
}

Answer 4

I do that only for some components wrapping the selector with a span. In that way, I can control when the component goes down or goes up.

span.dropUp .chosen-container .chosen-drop {
    border-bottom: 0;
    border-top: 1px solid #aaa;
    top: auto;
    bottom: 40px;
}

span.dropUp .chosen-container.chosen-with-drop .chosen-single {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-image: none;
}

span.dropUp .chosen-container.chosen-with-drop .chosen-drop {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; 
    box-shadow: none;   
    margin-bottom: -16px;
}

And in the html put it in that way.

<span class="dropUp">
        SELECT                              
</span>

Only the select wrapping with the span component would drop-up the list