Foros del Web » Creando para Internet » HTML »

Select con scrollbar vertical al desplegar

Estas en el tema de Select con scrollbar vertical al desplegar en el foro de HTML en Foros del Web. Hola a todos, llevo todo el día rompiéndome la cabeza para solucionar algo que en principio parecía sencillo pero que empieza a no parecerlo tanto. ...
  #1 (permalink)  
Antiguo 22/11/2010, 12:33
 
Fecha de Ingreso: enero-2010
Mensajes: 69
Antigüedad: 14 años, 9 meses
Puntos: 0
Select con scrollbar vertical al desplegar

Hola a todos,

llevo todo el día rompiéndome la cabeza para solucionar algo que en principio parecía sencillo pero que empieza a no parecerlo tanto.

Necesito hacer un select con muchas opciones dentro. Para ello, lo más cómodo es hacer un select con un scrollbar vertical (para ver un ejemplo práctico, sería como los select de http://www.vueling.com, para elegir los aeropuertos de origen y destino).

Es decir, no me refiero a añadir el atributo size mediante el cual aparecen las opciones en una cajita con el scrollbar, sería más bien hacer que esa cajita apareciera al desplegar el select.

He pensado que se podría poner dentro de un div oculto, y que al hacer click en el select se volviera visible, pero como era de esperar no me aparece justo como la lista desplegada, sino que me aparece en el punto de la pantalla donde he colocado el div dando la apariencia de ser un select independiente...

En fin, si alguien me puede echar una mano, le estaré muuuuy agradecido...
Saludos!!
  #2 (permalink)  
Antiguo 23/11/2010, 19:56
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 9 meses
Puntos: 998
Respuesta: Select con scrollbar vertical al desplegar

mmm, no entiendo la verdad.
Los selects que pones de ejemplo son selects comunes y corrientes...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 24/11/2010, 09:36
 
Fecha de Ingreso: enero-2010
Mensajes: 69
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: Select con scrollbar vertical al desplegar

Hola Webosiris,

gracias por responder. No me parece que sean selects corrientes. Cuando pones un select corriente, te aparece una lista desplegable con tantos valores visibles como haya.

Sin embargo, en el select de vueling.com de los aeropuertos de origen, aparecen en primer lugar desde "A Coruña" hasta "Madrid", pudiendo hacer un scroll para ver el resto de aeropuertos. O mismamente, en esta misma página, abajo del todo, aparece "Ir al foro", desplegándose con su scroll vertical. Es ese scroll vertical el que quiero conseguir.

Si pongo este código:

Código HTML:
<html><head></head>
<body>

<select>
<option id="1">1</option>
<option id="2">2</option>
<option id="3">3</option>
<option id="4">4</option>
<option id="5">5</option>
<option id="6">6</option>
<option id="7">7</option>
<option id="8">8</option>
<option id="9">9</option>
<option id="10">10</option>
<option id="11">11</option>
<option id="12">12</option>
<option id="13">13</option>
<option id="14">14</option>
<option id="15">15</option>
<option id="16">16</option>
<option id="172">17</option>
<option id="183">18</option>
<option id="191">19</option>
<option id="20">20</option>
<option id="21">21</option>
<option id="22">22</option>
<option id="23">23</option>
<option id="24">24</option>

</select>
</body>
</html>

me aparecen los 24 valores de una tacada. Querría, por ejemplo, que salieran de 5 en 5, e ir recorriendo el select con el scroll.

Espero haberme explicado bien :)

Saludos!!

Última edición por Borsetto; 24/11/2010 a las 09:53
  #4 (permalink)  
Antiguo 24/11/2010, 09:54
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 9 meses
Puntos: 998
Respuesta: Select con scrollbar vertical al desplegar

hola, no, es un select normal. Cuando llega a determinado número de items, el scroll aparece solo. Haz la prueba.

Copia este select (es el de vueling) en un archivo html nuevo, sin css ni nada:
Código HTML:
Ver original
  1. <select><option value="???">Origen</option><option value="LCG">A Coruña (LCG)</option><option value="ALC">Alicante (ALC)</option><option value="AMS">Amsterdam (AMS)</option><option value="OVD">Asturias (OVD)</option><option value="ATH">Atenas (ATH)</option><option value="BCN">Barcelona (BCN)</option><option value="BIO">Bilbao (BIO)</option><option value="BRU">Bruselas (BRU)</option><option value="OTP">Bucarest (OTP)</option><option value="CQM">Ciudad Real (CQM)</option><option value="GLG">Galicia (GLG)</option><option value="LPA">Gran Canaria (LPA)</option><option value="GRX">Granada (GRX)</option><option value="IBZ">Ibiza (IBZ)</option><option value="XRY">Jerez (Cádiz) (XRY)</option><option value="LIS">Lisboa (LIS)</option><option value="ILD">Lleida (ILD)</option><option value="LON">Londres (LON)</option><option value="MAD">Madrid (MAD)</option><option value="AGP">Málaga (AGP)</option><option value="PMI">Mallorca (PMI)</option><option value="RAK">Marrakech (RAK)</option><option value="MAH">Menorca (MAH)</option><option value="MXP">Milán (MXP)</option><option value="DME">Moscú (DME)</option><option value="NAP">Nápoles (NAP)</option><option value="PMO">Palermo (PMO)</option><option value="PAR">París (PAR)</option><option value="PSA">Pisa (Toscana) (PSA)</option><option value="PRG">Praga (PRG)</option><option value="FCO">Roma (FCO)</option><option value="LED">San Petersburgo (LED)</option><option value="SCQ">Santiago (SCQ)</option><option value="SVQ">Sevilla (SVQ)</option><option value="TCI">Tenerife (TCI)</option><option value="VLC">Valencia (VLC)</option><option value="VCE">Venecia (VCE)</option><option value="VIE">Viena (VIE)</option><option value="VGO">Vigo (VGO)</option><option value="ZRH">Zúrich (ZRH)</option></select>

PD: y tu ejemplo me funciona muy bien, me aparecen solo los primeros 20, no los 24 items. Supongo dependerá de la resolución de la pantalla, el navegador o similar.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 24/11/2010, 10:35
 
Fecha de Ingreso: enero-2010
Mensajes: 69
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: Select con scrollbar vertical al desplegar

Pues tienes toda la razón. Por lo visto, IE saca 30 resultados y Firefox sólo 20... y estaba probándolo sólo en IE... parezco nuevo en esto, pero tampoco me esperaba que una cosa tan simple como un select se visualizase de forma diferente en uno y otro navegador...

En fin... que eso, que parezco nuevo...

Muchas gracias, webosiris
  #6 (permalink)  
Antiguo 14/03/2011, 06:07
 
Fecha de Ingreso: septiembre-2007
Ubicación: Tarragona
Mensajes: 4
Antigüedad: 17 años, 2 meses
Puntos: 0
Respuesta: Select con scrollbar vertical al desplegar

Buenas,

respondiendo a este problema... porque tengo el mismo problema. No hay ninguna manera de limitarlo de la misma manera para IE como para cualquier navegador? Es decir, que se muestren un numero fijo al desplegar y con el scroll para el resto?

Gracias.

Etiquetas: desplegar, scrollbar, select, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:40.