<SELECT> Muito longo | HTML e CSS: Os seus primeiros passos

4
respostas

Referente ao curso HTML e CSS: Os seus primeiros passos

por Felipe Sevilhano

| 136.4k xp | 49 posts

Galera, Estou com uma dúvida que acredito ser simples mas não estou encontrando a resposta. Tenho um select que é populado pelo banco de dados e por padrão ele fica bem longo. Eu gostaria deixar mostrando uns 5 ou 6 itens, caso o usuário queira ver os outros estados utiliza a barra de rolagem.

https://drive.google.com/open?id=0Bz6eXhxfD4CcOGltenlXU19fRzQ (Imagem de como está meu formulário atualmente)

E pra piorar se ele percebe que tem espaço ele abre a caixa de rolagem para cima em vez de para baixo, conforme a imagem abaixo.

https://drive.google.com/open?id=0Bz6eXhxfD4CcZFFvSnpWYTlOM3c Bizarro!

Eu dei uma pesquisada e encontrei o atributo "Size", mas parece que ele só pode ser utilizado quando o select é definido como multiple. Alguem sabe como posso resolver esse problema? Valeu!

4 respostas

por GABRIEL DE JESUS FILHO

| 1103.5k xp | 665 posts

TÉCNICO JUDICIÁRIO : ÁREA ADMINISTRATIVA

11/09/2017

O código abaixo funciona perfeitamente no Chrome.

<html>
<body>

<select size=4>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
</select>

</body>

</html>

por Felipe Sevilhano

| 136.4k xp | 49 posts

11/09/2017

Gabriel, para mim ele aparece como uma lista e não como um combobox.

Eu gostaria de um combobox que mostrasse os 5 primeiros itens e o restante fosse preciso rolar a barra de rolagem para ver.

Sabe como posso chegar nesse resultado?

por GABRIEL DE JESUS FILHO

| 1103.5k xp | 665 posts

TÉCNICO JUDICIÁRIO : ÁREA ADMINISTRATIVA

11/09/2017

Pode compartilhar o código que está gerando o SELECT ?

por Felipe Sevilhano

| 136.4k xp | 49 posts

11/09/2017

O que acontece é o seguinte: Meu banco devolve 27 estados para dentro do select, por padrão o navegador mostra 11 itens no select e o restante você navega pelo scrollbar.

O que eu gostaria era que continuasse carregando esses 27 estados mas que em vez de mostrar 11 itens como padrão, mostrasse 5 ou 6

Se eu utilizar o atributo size ele troca o componente em vez de usar um combobox ele utiliza um elemento tipo lista.

HTML

<select class="ui-select-style1" name="estado" id="idEstado">
    <option value="" disabled selected>Selecione um estado</option>
    <?php foreach($states as $s) : ?>
        <option value="<?=$s->getId()?>"><?=$s->getName()?></option>
    <?php endforeach; ?>
</select>

CSS

.ui-select-style1{
    padding-left: 7px;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    color: rgb(119,119,119);
    outline: none;
}
.ui-select-style1:focus{
        border: 1px solid rgb(140,174,229);
        box-shadow: 1px 1px 1px rgba(140,174,229,0.25);    
}