CODEWITHSUNDEEP
jquery-select2
ThomasD
ThomasD

Reputation: 2494

force select2-plugin to show all items

I am using select2 and would like to force it show all available options when expanded instead of adding a scrollbar.

Right now it has a scrollbar inside the option area: http://screencast.com/t/fYKPArqz5f

Is that possible?

Upvotes: 4

Views: 1974

Answers (1)

Simon Adcock
Simon Adcock

Reputation: 3562

You can update the CSS in select2.css, roughly line 302:

/* results */
.select2-results {
    /* max-height: 200px;  comment out the max-height! */
    padding: 0 0 0 4px;
    margin: 4px 4px 4px 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Or if you don't have access to the CSS, or don't want to change it generally across your site, you can override the specific style in your own stylesheet:

.select2-results {
    max-height: none;
}

See this JSFiddle

Upvotes: 2

Related Questions