Materialize: Select list not scrolling

[neilhanvey]

I have a select with a large number of items, it cuts off and will not scroll to these items using the scroll wheel. If i open the select and click the down arrow on the keyboard it scrolls ok. Any ideas on a fix? This is in all browsers

[acburst]

Can you post a codepen or something? It seems to be working for me locally

[dbnoble]

Is there a scroll bar visible? If not, set a max-height for the element as well as overflow: auto in your css.

[diegogurgel]

Hi @neilhanvey try call material_select() passing the select id
$('#select-id').material_select();

[decadence]

I have this issue too. It's because select dropdown has max-height property and overflow: hidden (if I remember correctly).
This piece of styles helped me to show scroll:

.select-dropdown{
    overflow-y: auto !important;
}

[fega]

Please provide a way to reproduce it. like a codepen

Closed due inactivity, feel free to reopen it if it is still necessary.

[apudiu]

Man, that problem really exists... You just cannot close due to inactivity, bear in mind this framework is not so popular that you will get huge traffic.

I'm also experiencing this issue, I've a form inside a bottom sheet modal & there's 5 dropdown's, (checkout the img), the first three dropdown shows scrollbar some times & sometimes not. & 2nd line has 2 scrollbar, those never shows scrollbars, sometimes it shows for a sec & then hides,

I'm filling <option></option> data using an (jquery) Ajax call. & as of documentation I'm destroying the previous elements & re calling the initiator.

So, we need fix, if you have more questions then pls feel free to ask.

[Ross-Rawlins]

Did you find a solution to this/

[bugy]

For those who are still facing the issue, try adding backface-visibility: hidden to the .dropdown-content.
For me the issue happened only in chrome, and according to multiple stackoverflow discussions, backface-visibility: visible works unreliably with different transformations in Chrome.

[xblue-light]

@bugy solution worked for me, currently working with x5 optgroups and 5+ options per optgroup the max-height was gigantic and not very practical so here is the final result that fixed all my issues:

.dropdown-content {
    max-height: 350px !important;
    overflow-y: auto !important;
    backface-visibility: hidden !important;
}

Thanks again @bugy and other contributors!

[Souvik04]

How can I override the CSS class dropdown-content in ReactJS?

[pidugusundeep]

@xblue-light Thanks this helped.