Overflow issue for fields that have a large amount of options/choices

[dave4jr]

I was having an issue where if I had a field with large amount of choices (i.e. - State or Country Field), there was no scrollbar and the list overflowed outside of the div. I fixed this by setting:

.nice-select .list { max-height: 300px; overflow: scroll; }

[Sinequanonh]

+1

[Surbma]

Just, what I needed. I've add a little fix:

.nice-select .list { max-height: 300px; overflow-y: scroll; }

[kenshinman]

Errrm, this didn't work until I added .open to .nice-select

.nice-select.open .list { max-height: 300px; overflow-y: scroll; }

[yaniv-mobilebrain]

Problem is, elements hidden atthe bottom of the list won't show up, and you need to take care of it in the click handler, to get the selected element into focus.

I solved it like this:

$(".nice-select.main").on("click", function() { setTimeout(function() { $(this).find(".list li.selected")[0].scrollIntoView(); }.bind(this), 100); });

[basheer-atx]

Not working for me

[harontaiko]

Apparently, combining @Surbma and @yaniv-mobilebrain' s solutions, fixed the problem of content overflowing inside a div and maintains a height of 300px and also the contents inside ul.list become scrollable