Ancho de lista desplegable en IE

92

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

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

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

javascript html internet-explorer drop-down-menu Nimesh Madhavan
fuente

Respuestas:

102

Aquí hay otro ejemplo basado en jQuery . A diferencia de todas las otras respuestas publicadas aquí, tiene en cuenta todos los eventos del teclado y el 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 necesita hacer es agregar la clase widea los elementos desplegables en cuestión.

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

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

BalusC
fuente
2
+1: De todas las soluciones propuestas aquí, esta funcionó mejor para mí. También necesitaba hacer cambios en CSS y HTML para que funcionara en mi caso. Mucho trabajo, para algo que debería funcionar fuera de la caja.
kgiannakakis
1
Funciona con IE7 no en IE6 - ¿Hay algún ajuste para esto para IE6?
DMin
4
@DMin: Lo sentimos, no admitimos navegadores antiguos y obsoletos como IE6.
BalusC
3
@BalusC: :) Sé que mi amigo IE apesta - sin embargo usé tu respuesta, funcionó para IE7 - escribí un código separado para IE6 que incluía tu respuesta + enlace. ('Mouseenter' .. - funcionó bien - Gracias de todos modos! :)
DMin
3
Dependiendo de sus otras reglas de CSS, es posible que width: auto !important;
deba
14

Crear su propia lista desplegable es más complicado de lo que vale la pena. Puede usar algo de JavaScript para hacer que el menú desplegable de IE funcione.

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

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

Pon estos antes de la etiqueta del cuerpo 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>

Publicar aceptación editar:

También puede hacer esto sin la biblioteca YUI y el control Hack. Todo lo que necesitas hacer es poner un onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (o lo que quieras) en el elemento seleccionado. El control YUI le da esa bonita 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 la salida del mouse para los controles de selección (no considera que el mouse sobre las opciones sea un mouse sobre la selección). Esto hace que usar un mouseout sea muy complicado. La primera solución es la mejor que he encontrado hasta ahora.

Ninja de privación del sueño
fuente
3
Obtengo un 404 en ambos enlaces
Chris B
El problema con esta solución es si tiene selecciones dinámicas, por ejemplo, en una aplicación de comercio electrónico para atributos de productos. Nunca sabrá las identificaciones de todos los
menús
1
Los enlaces ya no son 404 pero muestran lo que considero spam malicioso. Consideré la posibilidad de votar en contra, pero seré amable y me limitaré a señalarlo.
davur
12

podría intentar 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.

Sai
fuente
1
Genial, lo mejoré un poco (usando el comentario condicional para la detección de IE) y agregué algunos comentarios, funciona muy bien y no jQuery u otras bibliotecas. Vea aquí: jsbin.com/ubahe5/edit - por favor EDITE su respuesta que QUIERO DARLE +1, pero no puedo porque voté mal antes.
Marco Demaio
9

Usé la siguiente solución y parece funcionar bien en la mayoría de 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: $ .browser.msie requiere jquery.

Justin Fisher
fuente
Para cualquier otra persona que tenga sueño, eso debería estar enmousedown no enmousdown, me tomó unos momentos ver el problema
shearichard
7

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

$(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 seguirá expandiendo el cuadro de selección al hacer clic, en lugar de solo los elementos. (y parece fallar en IE6, pero funciona perfectamente en Chrome e IE7)

Tinus
fuente
5

No hay forma de hacerlo en IE6 / IE7 / IE8. El control lo dibuja 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 que el menú desplegable tenga un ancho y la lista otro ancho.

Robert C. Barth
fuente
la solución es: use javascript y css para ajustar automáticamente el ancho en el mouse (y otros eventos de teclado ...). lea aquí: css-tricks.com/select-cuts-off-options-in-ie-fix la mejor solución (menos invasiva)
tuffo19
5

Si usa jQuery, pruebe este complemento de ancho de selección de IE:

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 funcionaría en Firefox, Opera, etc. al permitir que los elementos de opción se abran en el ancho completo sin perder el aspecto 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.

Ewen
fuente
4

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

$(document).ready(function(){

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

});
Eran Medan
fuente
3

Esta es la solución más sencilla.

Antes de comenzar, debo decirle que el cuadro de selección desplegable se expandirá automáticamente en casi todos los navegadores excepto IE6. Por lo tanto, haría una verificación del navegador (es decir, IE6) y escribiría lo siguiente solo en ese navegador. Aquí va. Primero verifique el navegador.

El código expandirá mágicamente el cuadro de selección desplegable. El único problema con la solución es onmouseover el menú desplegable se expandirá a 420px, y debido a que overflow = hidden, estamos ocultando el tamaño del menú desplegable expandido y mostrándolo como 170px; por lo tanto, la flecha del lado derecho del ddl estará oculta y no se podrá ver. pero el cuadro de selección se ampliará a 420px; que es lo que realmente queremos. Simplemente pruebe el siguiente código y utilícelo si le gusta.

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

Lo anterior es el CSS de IE6. El CSS común para todos los demás navegadores debería ser el siguiente.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
bluwater2001
fuente
2

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

leva
fuente
2

mira esto ... no es perfecto pero funciona y es solo para IE y no afecta a FF. Utilicé el javascript normal para onmousedown para establecer la única solución de IE ... pero el msie de jquery también podría usarse en onmousedown ... la idea principal es "onchange" y en el desenfoque para que el cuadro de selección vuelva a la normalidad ... .decidir su propio ancho para esos. Necesitaba el 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
Lucien
fuente
2

La respuesta de BalusC anterior funciona muy bien, pero hay una pequeña solución que agregaría si el contenido de su menú desplegable tiene un ancho más pequeño que el que define en su CSS select.expand, agregue esto al enlace del mouseover:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})
jbabey
fuente
2

Esto es algo que he hecho tomando partes de las cosas de otras personas.

        $(document).ready(function () {
        if (document.all) {

            $('#<%=cboDisability.ClientID %>').mousedown(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboDisability.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboDisability.ClientID %>').change(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').mousedown(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboEthnicity.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').change(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
            });

        }
    });

donde cboEthnicity y cboDisability son menús desplegables con texto de opción más ancho que el ancho de la selección en sí.

Como puede ver, he especificado document.all ya que esto solo funciona en IE. Además, encerré los menús desplegables dentro de elementos div como este:

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

Esto se encarga de que los otros elementos se muevan fuera de lugar cuando se expande el menú desplegable. El único inconveniente aquí es que el visual menulista desaparece cuando está seleccionando, pero regresa tan pronto como ha seleccionado.

Espero que esto ayude a alguien.

Derrick
fuente
2

esta es la mejor manera de hacer esto:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

es exactamente lo mismo que la solución BalusC. Solo que esto es más fácil. ;)

mcmwhfy
fuente
Volví a probar tu CSS y funciona en Chrome y algo en Firefox, pero no en IE8. (¿Quizás mi IE8 sea una versión diferente?) Desde entonces se me ocurrió mi propia solución basada en js. Ver tahirhassan.blogspot.co.uk/2013/02/…
Tahir Hassan
Jugar un poco en IE8 con esto y un ajuste más tarde ayudó. Solo tuve que poner el padre <td> a un ancho fijo, reposicionar el valor superior y ¡ahí estuvo !. Gracias
j4v1
2

Está disponible un complemento jQuery completo. Es compatible con el diseño y las interacciones de teclado sin interrupciones, consulte la página de demostración: http://powerkiki.github.com/ie_expand_select_width/

descargo de responsabilidad: codifiqué esa cosa, los parches son bienvenidos

PowerKiKi
fuente
1

La solución de jquery BalusC mejoró por mí. Utilizado también: comentario de Brad Robertson aquí .

Simplemente coloque esto en un .js, use la clase amplia para sus combos deseados y no falsifique para darle una identificación. Llame a la función en la carga (o documentReady o lo que sea).
Tan simple que :)
Utilizará el ancho que definiste para el combo como longitud mínima.

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(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');
    })
    }
}
Federico Valido
fuente
0

Puede agregar un estilo directamente al elemento seleccionado:

<select name="foo" style="width: 200px">

Entonces, este elemento seleccionado tendrá 200 píxeles de ancho.

Alternativamente, puede aplicar una clase o identificación al elemento y hacer referencia a él en una hoja de estilo

Katy
fuente
0

Hasta ahora no hay uno. No sé sobre IE8, pero no se puede hacer en IE6 e IE7, a menos que implemente su propia funcionalidad de lista desplegable con javascript. Hay ejemplos de cómo hacerlo en la web, aunque no veo mucho beneficio en duplicar la funcionalidad existente.

pilsetnieks
fuente
0

Tenemos lo mismo en un asp: dropdownlist:

En Firefox (3.0.5), el menú desplegable es el ancho del elemento más largo en el menú desplegable, que tiene como 600 píxeles de ancho o algo así.


fuente
0

Esto parece funcionar con IE6 y no parece romper otros. La otra cosa buena es que cambia el menú automáticamente tan pronto como cambia su selección desplegable.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});
lhoess
fuente
0

El enlace hedgerwow (la solución alternativa de animación de YUI) en la primera mejor respuesta está roto, supongo que el dominio expiró. Copié el código antes de que caducara, por lo que puede encontrarlo aquí (el propietario del código puede avisarme si estoy infringiendo los derechos de autor cargándolo de nuevo)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

En la misma publicación del blog escribí sobre cómo hacer exactamente el mismo elemento SELECT como el normal usando el menú del botón YUI. ¡Eche un vistazo y avíseme si esto ayuda!

Hammad Tariq
fuente
0

Según la solución publicada por Sai , así es como se hace con jQuery.

$(document).ready(function() {
    if ($.browser.msie) $('select.wide')
        .bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
        .bind('blur', function() { $(this).css({position:'static',width:''}); });
});
Ahmad Alfy
fuente
0

Pensé en tirar mi sombrero al ring. Hago una aplicación SaaS y tenía un menú de selección incrustado dentro de una tabla. Este método funcionó, pero sesgó todo en la tabla.

onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"

Entonces, lo que hice para mejorarlo fue lanzar la selección dentro de un div indexado en z.

<td valign="top" style="width:225px; overflow:hidden;">
    <div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
        <select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
            <option value="0">All</option>
            <!--More Options-->
        </select>
    </div>
</td>
n0nag0n
fuente
0

Tuve que solucionar este problema y una vez se me ocurrió una solución bastante completa y escalable que funcionaba para IE6, 7 y 8 (y, obviamente, compatible con otros navegadores). He escrito un artículo completo al respecto aquí mismo: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

Pensé en compartir esto con las personas que todavía se encuentran con este problema, ya que ninguna de las soluciones anteriores funciona en todos los casos (en mi opinión).

Aerendel
fuente
0

Probé todas estas soluciones y ninguna funcionó completamente para mí. Esto es lo que se me ocurrió

$(document).ready(function () {

var clicknum = 0;

$('.dropdown').click(
        function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                $(this).css('position', '');
                $(this).css('width', '');
            }
        }).blur(
        function() {
            $(this).css('position', '');
            $(this).css('width', '');
            clicknum = 0;
        }).focus(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        }).mousedown(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        });
})(jQuery);

Asegúrese de agregar una clase desplegable a cada menú desplegable en su html

El truco aquí es usar la función de clic especializada (lo encontré aquí Fire event cada vez que se selecciona un elemento DropDownList con jQuery ). Muchas de las otras soluciones aquí utilizan el cambio de controlador de eventos, que funciona bien pero no se activará si el usuario selecciona la misma opción que se seleccionó anteriormente.

Al igual que muchas de las otras soluciones, el enfoque y el mousedown es para cuando el usuario enfoca el menú desplegable, el desenfoque es para cuando hace clic.

Es posible que también desee incluir algún tipo de detección del navegador en esto para que solo afecte, es decir. Aunque no se ve mal en otros navegadores

RasTheDestroyer
fuente
0

Está probado en todas las versiones de IE, Chrome, FF y Safari

Código JavaScript:

<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}

function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->

Código HTML:

<select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
  <option value="0" selected="selected" readonly="readonly">Select</option>
  <option value="1" >Apple</option>
  <option value="2" >Orange + Banana + Grapes</option>
Arif
fuente