CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-select2
Waterlink
Waterlink

Reputation: 2369

select2 too long list without scroll makes wrong item selected

I have select2 attached to select field. We have about 20-30 items to choose from. Items represented as long strings (2-3 lines in each). So we need to scroll to select items after 15th.

So:

  1. We click on select2 to trigger dropdown.
  2. We scroll whole page to access one of the latter elements.
  3. We select 25th element for example.
  4. But select now has 17th element as its value. And this is totally wrong.

I can't think about any workaround, but to make select2 fit in page height entirely. And only one solution is to make it scrollable, but this is ugly. So, is there any other solution ?

I'm removing scroll from select2 results by this css

.select2-results {
  min-height: 50px;
  max-height: none;
  overflow-y: visible;
}

jsfiddle:

http://jsfiddle.net/s3mrq/10/

Upvotes: 3

Views: 2128

Answers (1)

JacobEvelyn
JacobEvelyn

Reputation: 3971

I'm not sure I totally understand your question, but it seems like you might be after a good way to display a lot of elements in a dropdown with the ease of Select2 but the ability to see lots of options at once that you might get from a custom-styled <select>. If that's the case, a plugin I wrote (maximize-select2-height) that expands Select2 dropdowns to be larger might be what you're looking for. Let me know if that helps!

Upvotes: 1

Related Questions