How to adjust Select size in Bootstrap?

Asked

Viewed 2,524 times

1

I’m learning Bootstrap to make a simple page and want to increase the size of my Select. See the current code:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h3>Selecione o Estabelecimento:</h3>
            <select class="form-control" id="comboEstabelecimento">
                    <option value="2017053290201706130726082"></option>
                    <option value="2605006453163">CAPS CUPIRA </option>
                    <option value="2605002631393">CENTRO DE SAUDE </option>
                    <option value="2605006934323">CEO CUPIRA</option>
                    <option value="2605007720475">DEPARTAMENTO DE VIGILANCIA AMBIENTAL</option>
                    <option value="2605007559267">DEPARTAMENTO DE VIGILANCIA SANITARIA</option>
                    <option value="2605006341845">ESF CAIXA DAGUA </option>
                    <option value="2605002631520">ESF CHA DAS PANELAS </option>
                    <option value="2605006118143">ESF COHAB </option>
                    <option value="2605006341802">ESF DA GLORIA </option>
                    <option value="2605002631482">ESF LAJE DE SAO JOSE</option>
                    <option value="2605002631504">ESF MUTIRAO </option>
                    <option value="2605002631458">ESF NOVO HORIZONTE</option>
                    <option value="2605002631512">ESF PRESIDENTE VARGAS </option>
                    <option value="2605002631490">ESF SAMBAQUIM </option>
                    <option value="2605002354845">HOSPITAL MUNICIPAL JOSE VERISSIMO DE SOUZA</option>
                    <option value="2605007735367">LABORATORIO DE PROTESE SPDENTE</option>
                    <option value="2605006359558">NASF</option>
                    <option value="2605007528183">POLO ACADEMIA DAS CIDADES DE CUPIRA </option>
                    <option value="2605006134149">SAMU</option>
                    <option value="2605006470033">SECRETARIA MUNICIPAL DE SAUDE DE CUPIRA </option>
            </select>
        </div>
    </div>
</div>

See how it looks on the screen:

inserir a descrição da imagem aqui

The component is smaller than the text inside. How to fix?

Note: I am filling this data dynamically using C#

bootstrap-3

1 answer

4


You can use CSS width to fix this.

#comboEstabelecimento{
 width:auto;   
}
<h3>Selecione o Estabelecimento:</h3>
<select class="form-control" id="comboEstabelecimento">
    <option value="2017053290201706130726082"></option>
    <option value="2605006453163">CAPS CUPIRA </option>
    <option value="2605002631393">CENTRO DE SAUDE </option>
    <option value="2605006934323">CEO CUPIRA</option>
    <option value="2605007720475">DEPARTAMENTO DE VIGILANCIA AMBIENTAL</option>
    <option value="2605007559267">DEPARTAMENTO DE VIGILANCIA SANITARIA</option>
    <option value="2605006341845">ESF CAIXA DAGUA </option>
    <option value="2605002631520">ESF CHA DAS PANELAS </option>
    <option value="2605006118143">ESF COHAB </option>
    <option value="2605006341802">ESF DA GLORIA </option>
    <option value="2605002631482">ESF LAJE DE SAO JOSE</option>
    <option value="2605002631504">ESF MUTIRAO </option>
    <option value="2605002631458">ESF NOVO HORIZONTE</option>
    <option value="2605002631512">ESF PRESIDENTE VARGAS </option>
    <option value="2605002631490">ESF SAMBAQUIM </option>
    <option value="2605002354845">HOSPITAL MUNICIPAL JOSE VERISSIMO DE SOUZA</option>
    <option value="2605007735367">LABORATORIO DE PROTESE SPDENTE</option>
    <option value="2605006359558">NASF</option>
    <option value="2605007528183">POLO ACADEMIA DAS CIDADES DE CUPIRA </option>
    <option value="2605006134149">SAMU</option>
    <option value="2605006470033">SECRETARIA MUNICIPAL DE SAUDE DE CUPIRA</option>
</select>

See working on jsfiddle.

  • Thanks for the answer, but putting a fixed amount (350px) will not solve if I need to insert more larger items. I need a way Select dynamically adjust.

  • 1

    I updated my reply(css), see if it works as you wanted now.

  • Neither. I saw that in the example you posted works with width:100%; the question should be with Bootstrap itself.

  • It may be because I dynamically fill in the items. Leave it alone then. Thank you.

Browser other questions tagged bootstrap-3

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