[Bug]: Select Options does not overflow cards

[ygorma]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

localhost_8080_freeflow_view.php_page.cadastro.e.mais.5.paginas.-.Pessoal.Microsoft.Edge.2024-04-11.11-44-27.mp4

Options must to overflow the card instead expand the card height.

Current Behavior

Select options expand the card internal height.

Expected behavior

Options must to overflow the card.

Possible Solutions or Causes

No response

Steps to reproduce

<div class="card">
        <div class="card-content">
          <span class="card-title">Cadastro de Colaborador</span>
          <p>Preencha atentamente o formulário de cadastro para criar seu acesso.</p><br><form name="cadastrarUsuario" action="api/cadastrarUsuario" method="POST" class="row" enctype="multipart/form-data"><div class="s12 input-field outlined" style="margin: 5px 5px;">
            <input id="cadastrarUsuario.nome" form="form_cadastrarUsuario" name="nome" type="text" placeholder=" ">
            <label for="cadastrarUsuario.nome">Nome Completo</label>
        </div><div class="input-field outlined s4" style="margin: 5px 5px;">
        <select form="cadastrarUsuario" id="cadastrarUsuario.sexo">
            <option value="" disabled selected>Selecione uma Opção</option><option value="0">Feminino</option><option value="1">Masculino</option>
        </select>
        <label for="cadastrarUsuario.sexo">Sexo</label>
      </div><div class="s4 input-field outlined" style="margin: 5px 5px;">
            <input id="cadastrarUsuario.cpf" form="form_cadastrarUsuario" name="cpf" type="text" placeholder=" ">
            <label for="cadastrarUsuario.cpf">CPF</label>
        </div><div class="s4 input-field outlined" style="margin: 5px 5px;">
            <input id="cadastrarUsuario.email" form="form_cadastrarUsuario" name="email" type="text" placeholder=" ">
            <label for="cadastrarUsuario.email">E-mail</label>
        </div></form>
        </div>
        <div class="card-action"><a href="[#](http://localhost:8080/freeflow/view.php?page=cadastro#)" onClick="">Enviar Formulário</a>
        </div>
      </div>

Your Environment

Version used: 2.0.4
Browser Name and version: Edge 123.0.2420.81
Operating System and version (desktop or mobile): Windows 10
Additional information you want to tell us: N/A

[cmorgancli]

This is still an issue in versions 2.1.0 and 2.1.1

[cmorgancli]

Has anyone found a workaround for this issue?

[Jerit3787]

Hi, you can change the overflow of the card to be visible for the dropdown to work. I think the solution is to fix the z-index of elements in order to properly fix this issue

.card {
   overflow: visible !important;
}

[gselderslaghs]

Would be great if additional helper classes can be added to the sass component library for cases like this