Materialize Css : select in card

Question

I am trying to use select in a card.

Problem is that when the select list is open and it should overflow outside of card, it doesn't.

The overflowing part is hidden/blocked/gone.

I've tried following and failed:

• overflow:visible
• increasing z-index
• changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)

on a side question, is it not a proper material design to use select (or other inputs) in a card?

Answer 1

This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.

Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.