Is there a way to set a max-height for the dropdown of the select tag?

Asked

Viewed 44 times

0

I’m looking for a way to define a max-height for the tag dropdown <select>, if this is possible, once a max-height, me user overflow: auto; to do as the second image by setting a scroll bar on the element.

If that’s not possible, someone would have some suggestion for what I’m trying to do?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

<select>
    <option value="Nenhum">Nenhum</option>
    <option value="100.00">Até R$ 100,00</option>
    <option value="200.00">Até R$ 200,00</option>
    <option value="400.00">Até R$ 400,00</option>
    <option value="600.00">Até R$ 600,00</option>
    <option value="800.00">Até R$ 800,00</option>
    <option value="1000.00">Até R$ 1.000,00</option>
    <option value="2000.00">Até R$ 2.000,00</option>
    <option value="4000.00">Até R$ 4.000,00</option>
    <option value="6000.00">Até R$ 6.000,00</option>
    <option value="8000.00">Até R$ 8.000,00</option>
    <option value="10000.00">Até R$ 10.000,00</option>
</select>

javascript html css

  • This is from the user-agent and I don’t think there’s any way to set the height, or even set it to scroll, I’ve never actually seen a native browser select that has scroll

  • put in the question a verifiable example, I see that you’re using something like bootstrap or material to format, some frameworks/libs may have classes that help, but as @hugocsl commented, with pure css in the element select may not be possible with javascript or using some framework that renders the select differently can be

  • I use the Zurb framework, Foundation https://get.foundation

1 answer

0

Instead of you using max-height use the data-size of the selectpiker, is already ready just implement see this example I think will suit you:

<select class="selectpicker" data-size="2">
     <option value="Nenhum">Nenhum</option>
     <option value="100.00">Até R$ 100,00</option>
     <option value="200.00">Até R$ 200,00</option>
     <option value="400.00">Até R$ 400,00</option>
     <option value="600.00">Até R$ 600,00</option>
     <option value="800.00">Até R$ 800,00</option>
     <option value="1000.00">Até R$ 1.000,00</option>
     <option value="2000.00">Até R$ 2.000,00</option>
     <option value="4000.00">Até R$ 4.000,00</option>
     <option value="6000.00">Até R$ 6.000,00</option>
     <option value="8000.00">Até R$ 8.000,00</option>
     <option value="10000.00">Até R$ 10.000,00</option>
</select>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

take a look at boostrap4

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.