Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Select Options does not overflow cards #474

Open
3 tasks done
ygorma opened this issue Apr 11, 2024 · 4 comments
Open
3 tasks done

[Bug]: Select Options does not overflow cards #474

ygorma opened this issue Apr 11, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@ygorma
Copy link

ygorma commented Apr 11, 2024

Before submitting...

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

@ygorma ygorma added the bug Something isn't working label Apr 11, 2024
@cmorgancli
Copy link

This is still an issue in versions 2.1.0 and 2.1.1

@cmorgancli
Copy link

Has anyone found a workaround for this issue?

@Jerit3787
Copy link

Jerit3787 commented Oct 12, 2024

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants