1

Estou aprendendo Bootstrap pra fazer uma página simples e quero aumentar o tamanho do meu Select. Vejam o código atual:

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

Vejam como fica na tela:

inserir a descrição da imagem aqui

O componente fica menor que o texto que está dentro. Como corrigir?

Obs.: Estou preenchendo esses dados dinamicamente usando C#

1 Resposta 1

4

Você pode utilizar o width do CSS para corrigir isso.

#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>

Veja funcionando no jsfiddle.

4
  • Obrigado pela resposta, mas colocar um valor fixo (350px) não irá resolver caso eu precise inserir mais itens de tamanho maiores. Preciso de uma forma que o Select se ajuste dinamicamente. Commented 10/07/2017 às 0:14
  • 1
    Atualizei minha resposta(css), veja se funciona como você queria agora.
    – Francisco
    Commented 10/07/2017 às 0:16
  • Também não. Vi que no exemplo que você postou funciona com width:100%; a questão deve ser com o Bootstrap mesmo. Commented 10/07/2017 às 0:24
  • Pode ser porque eu preencho os itens dinamicamente. Deixa quieto então. Obrigado. Commented 10/07/2017 às 0:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .