Search code examples
cssselectdrop-down-menumaterialize

Materialize Css : select in card

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?

Solution

  • 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.