Despliegue de un select al estilo Firefox/Ópera en IE

rantamplan · #1 (**permalink**) 20/08/2007, 03:38

Hola buenos días!.

Tengo los select limitados de tamaño, es decir, no tienen el tamaño del mayor option.

Y he observado que tanto en firefox como en ópera cuando despliegas el select (pinchas en la flecha y se abren todas las posibilidades), el menu que emerge es tan grande (ancho) como sea necesario para mostrar el option más largo.

Como no, en ie no es así, sino que el menu desplegado se queda en el ancho que tenía el select en si.

Mi pregunta es si hay alguna forma (bien por atributos css, bien por javascript) de hacer que el select se vea en ie como en firefox/ópera??.

Un saludo y gracias de antemano.

emprear · #2 (**permalink**) 20/08/2007, 14:43

Mira, yo he usado el siguiente código

<body>
<form id="form1" name="form1" method="post" action="">

<select name="select-uno">
<option value="1">opcion uno</option>
<option value="2">Opcion larga larga larga lasrga larga</option>
<option value="3">opcion intermedia</option>
</select>
</form>
</body>
y tanto en IE 7 como Firefox 2 y opera 9.x se ve exactamente igual, mostrando el ancho del select ajustado para la opcion de mayor temaño (que en mi ejemplo es la 2)

como ves NO hay definido ningun valor

Habría que tener tu código para verificar, lamentablemente no dipongo de IE6 para chequearlo.

Saludos

rantamplan · #3 (**permalink**) 21/08/2007, 01:06

No si yo también tengo el ie7. Creo que no me he explicado del todo bien.

Lo que hago es limitar los select con el atributo width. Los tengo limitados a 200px. Pero ya se sabe eso de que mejor 1 imagen que mil palabras (no me deja poner las imágenes porque tengo menos de 30 mensaje

, así que pongo los links):

IE7:
http://img245.imageshack.us/my.php?image=ie7wt2.jpg

FireFox:
http://img484.imageshack.us/img484/6452/firefoxeq3.jpg

Opera:
http://img256.imageshack.us/img256/1848/operakr4.jpg

Como puede verse en ie7 no se agranda el select para mostrar el contenido del option más largo. Alguien sabe como puedo solucionar esto?

Un saludo.

emprear · #4 (**permalink**) 21/08/2007, 07:50

ahora veo, supongo que deberás ajustar el tamaño de la fuente hasta hacerla visible en el espacio que has fijado.

Es curioso, generalmente los detractotres de IE te señalan que no respeta standares ni los modelos css, etc. Aquí al parecer los respeta al pie de la letra, cosa que los otros navegadores no hacen. No puedes quejarte, IE es el único que te muestra un select de 200px reales

Saludos

rantamplan · #5 (**permalink**) 21/08/2007, 12:28

Cita:

Iniciado por emprear

ahora veo, supongo que deberás ajustar el tamaño de la fuente hasta hacerla visible en el espacio que has fijado.

Es curioso, generalmente los detractotres de IE te señalan que no respeta standares ni los modelos css, etc. Aquí al parecer los respeta al pie de la letra, cosa que los otros navegadores no hacen. No puedes quejarte, IE es el único que te muestra un select de 200px reales

Saludos

Hombre de la forma que lo hace opera y firefox es mucho más practico y funcional. Porque cuando abres un select se despliega un menu que te tapa parte de la pantalla. Así que ya que te tapa parte de la pantalla, por lo menos que se vea todo lo del select.

Aparte de que no sabemos exactamente lo que opina la w3c, lo mismo el estándar es lo que hacen fire y opera (no me extrañaría).

De todas formas debería haber un atributo que controlase eso, y creo que no lo hay.

Un saludo

emprear · #6 (**permalink**) 21/08/2007, 12:57

he visto cosas increíble que me han quitado el sueño

http://www.hedgerwow.com/360/dhtml/u...width/demo.php

y si me atrevo a buscar creo que hay peores

rantamplan · #7 (**permalink**) 22/08/2007, 01:23

Cita:

Iniciado por emprear

he visto cosas increíble que me han quitado el sueño

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php

y si me atrevo a buscar creo que hay peores

En primer decirte que muchisimas gracias!.

Me he metido aquí:

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/

Y me bajado el ie-select-width-fix.js. Pero no consigo hacer que funcione. He añadido todos los scripts que aparecen en el ejemplo y he seguido el patrón que usa que simplemente es, crearte una variable

var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' );

y darle el id s1 al select que quieres que funcione de esa forma. Pero no funciona. Se le ocurre a alguien como puedo hacer que funcione?? (mientras voy a seguir probando).

Un saludo.

Nosolopalabras · #8 (**permalink**) 01/03/2010, 11:08

Tienes por ahí los ficheros, que la web donde bajarlos esta offline y no puedo cojer el JS para usarlo.

gracias.

leonardofloch · #9 (**permalink**) 04/03/2010, 14:31

Hola, buscando y buscando encontré donde descargar el: ie-select-width-fix.js
ya que todas las paginas ya no lo tienen.
este es el link: http://webfuel.technicallead.com/js/
y los otros: http://developer.yahoo.com/yui/download

Pero no he logrado que me funcione configuro todo según el ejemplo pero me sale un error(YAHOO is not defined).

si alguien me puede ayudar le agradecería mucho.

Gracias.

emprear · #10 (**permalink**) 07/03/2010, 08:52

Leonardo, aqui te dejo dos vinculos, el primero a una descripción del problema y de como solucionarlo utilizando las librerías js de Yahoo.
El detalle del problema en http://mmonreal.wordpress.com/2007/1...t-explorer-67/

Y un ejemplo funcional del mismo en http://www.miguelmonreal.com/example.../example1.html

Baja los códigos de los 3 archivos

yahoo-dom-event.js
ie-select-width-fix.js
example1.html

y probalos en tu máquina

Una sugerencia de mi parte : En el código de example1.html modifica el width de ancho fijo de 100 a 120 pixeles, ya que queda más estético.

Desde ya, gracias a Miguel Monreal Ordiñama por su excelente explicación
Saludos

ikaros · #11 (**permalink**) 10/07/2010, 05:59

No, realmente no es eso. Es una cosa aun más sencilla.

Es que el tamaño del select se acomoda un poco al tamaño de las options q tiene dentro. Y no quiero que lo haga.

Le he puesto en la hoja de estilos un width:100%, width: 200px y nada. Al añadirle nuevos <option> desde jQuery se cambia el tamaño...