Pregunta Ancho de lista desplegable en IE


En IE, la lista desplegable tiene el mismo ancho que Dropbox (espero que tenga sentido) mientras que en Firefox el ancho de la lista desplegable varía según el contenido.

Esto básicamente significa que tengo que asegurarme de que la Dropbox sea lo suficientemente amplia como para mostrar la selección más larga posible. Esto hace que mi página se vea muy fea :(

¿Hay alguna solución para este problema? ¿Cómo puedo usar CSS para establecer diferentes anchuras para Dropbox y la lista desplegable?


90
2017-09-16 16:02


origen


Respuestas:


Aquí está otro jQuery ejemplo basado A diferencia de todas las demás respuestas publicadas aquí, se tienen en cuenta todos los eventos de teclado y mouse, especialmente los clics:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Úselo en combinación con esta pieza de CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Todo lo que necesitas hacer es agregar la clase wide al elemento (s) desplegable en cuestión.

<select class="wide">
    ...
</select>

Aquí hay un ejemplo jsfiddle. Espero que esto ayude.


101
2018-03-25 14:58



Crear su propia lista desplegable es más doloroso de lo que vale. Puede usar JavaScript para hacer que el IE desplegable funcione.

Utiliza un poco de la biblioteca YUI y una extensión especial para arreglar cuadros de selección de IE.

Deberá incluir lo siguiente y envolver su <select> elementos en una <span class="select-box">

Pon estos antes de la etiqueta corporal de tu página:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

Edición de aceptación de publicación:

También puede hacer esto sin la biblioteca YUI y el control Hack. Todo lo que necesitas hacer es poner onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (o lo que quieras) en el elemento de selección. El control YUI le da una buena animación pero no es necesario. Esta tarea también se puede realizar con jquery y otras bibliotecas (aunque no he encontrado documentación explícita para esto)

- enmienda a la edición:
IE tiene un problema con el onmouseout para seleccionar controles (no considera que las opciones de mouseover sean un mouseover en la selección). Esto hace que usar un mouseout sea muy complicado. La primera solución es la mejor que he encontrado hasta ahora.


13
2017-09-16 17:00



podrías probar lo siguiente ...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

Lo intenté y me funciona. No se requiere nada más.


11
2018-06-03 19:48



Usé la siguiente solución y parece funcionar bien en la mayoría de las situaciones.

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

Nota la $ .browser.msie requiere jquery.


8
2017-09-05 17:31



@Thad necesita agregar un controlador de eventos borrosos también

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

Sin embargo, esto ampliará aún más la casilla de selección al hacer clic, en lugar de solo los elementos. (y parece fallar en IE6, pero funciona perfectamente en Chrome e IE7)


6
2018-06-24 08:19



No hay forma de hacerlo en IE6 / IE7 / IE8. El control es dibujado por la aplicación e IE simplemente no lo dibuja de esa manera. Su mejor opción es implementar su propio menú desplegable a través de HTML / CSS / JavaScript simple, si es tan importante tener el menú desplegable de un ancho y la lista de otro ancho.


4
2017-09-16 16:19



Si usa jQuery, pruebe este IE select width plugin:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

La aplicación de este complemento hace que el cuadro de selección en Internet Explorer parezca funcionar como lo haría en Firefox, Opera, etc., permitiendo que los elementos de opciones se abran a todo lo ancho sin perder la apariencia y el estilo del ancho fijo. También agrega soporte para relleno y bordes en el cuadro de selección en Internet Explorer 6 y 7.


4
2017-09-21 11:50



En jQuery, esto funciona bastante bien. Supongamos que el menú desplegable tiene id = "menú desplegable".

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});

3
2018-05-26 20:05



¡Aquí está la solución más simple! Antes de comenzar, debo decir que el cuadro de selección desplegable se expandirá automáticamente en casi todos los navegadores excepto en IE6.so .. Haría una comprobación de navegador [es decir, IE6] y escribiré lo siguiente solo en ese navegador. Aquí va ... Primero verifica el navegador ...

 El código expandirá mágicamente el cuadro de selección desplegable. El único problema con la solución es que el menú desplegable se ampliará a 420px ... y como el desbordamiento está oculto, estamos ocultando el tamaño desplegable expandido y mostrándolo como 170px, entonces, la flecha en el lado derecho de la ddl estará oculto y no se puede ver. pero el cuadro de selección se expandirá a 420px; que es lo que realmente queremos simplemente prueba el código a continuación y úsala si te gusta. Aclamaciones.

        .ctrDropDown     {         ancho: 420px;     }     .ctrDropDownClick     {         ancho: 420px;     }               

el anterior es el IE6 css. el css común [para todos los demás navegadores] debería ser el siguiente.   


2
2017-10-14 20:42



http://developer.yahoo.com/yui/examples/button/button-menu-select.html#


1
2017-12-09 11:53



si desea un menú desplegable simple y / o menú desplegable sin efectos de transición solo use CSS ... puede forzar IE6 para admitir: pase el mouse sobre todos los elementos usando un archivo .htc (css3hover?) con comportamiento (propiedad solo IE6) definido en el archivo CSS condicionalmente adjunto.


1
2017-12-09 17:32