it-swarm-es.tech

Ancho de lista desplegable en IE

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

Básicamente, esto 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 :(

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

92
Nimesh Madhavan

Aquí hay otro ejemplo basado en jQuery . Al contrario de todas las demás respuestas publicadas aquí, toma 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'); });
}

Úsalo 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 wide al elemento (s) desplegable en cuestión.

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

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

102
BalusC

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

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

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

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

Post aceptación de edición:

También puedes 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 seleccionado. El control YUI le da esa animación agradable, 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 los controles de selección (no considera que el mouseover en las opciones sea 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.

14

puedes 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.

12
Sai

Utilicé 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: el $ .browser.msie requiere jquery.

9
Justin Fisher

@Tenó que también debe 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)

7
Tinus

Si usa jQuery, pruebe este IE seleccionar el complemento de ancho:

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 todo el ancho sin perder el aspecto y el estilo del ancho fijo. También agrega soporte para rellenos y bordes en el cuadro de selección en Internet Explorer 6 y 7.

5
Ewen

No hay manera de hacerlo en IE6/IE7/IE8. El control lo dibuja la aplicación y 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 ancho desplegable de un desplegable y la lista de otro ancho.

5
Robert C. Barth

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

$(document).ready(function(){

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

});
4
Thad

Aquí está la solución más simple.

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 comprobación del navegador (es decir, IE6) y escribiría lo siguiente solo en ese navegador. Aquí va. Primero compruebe el navegador.

El código expandirá mágicamente el cuadro de selección desplegable. El único problema con la solución es onmouseover, el desplegable se ampliará a 420 px y, como el desbordamiento = oculto, estamos ocultando el tamaño desplegable desplegado y lo mostramos como 170 px; así, la flecha en el lado derecho del ddl estará oculta y no se podrá ver. pero el cuadro de selección se expandirá a 420px; que es lo que realmente queremos. Solo prueba el código a continuación y úsalo si te 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 debe 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.--%>
}
3
bluwater2001

mira esto ... no es perfecto pero funciona y es solo para IE y no afecta a FF. Utilicé el javascript regular para onmousedown para establecer IE solo reparar ... pero la msie de jquery también se podría usar en onmousedown .. la idea principal es "onchange" y en blur para tener la opción la caja vuelve a la normalidad ... decide tu 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%'"
2
lucien

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

2
cam

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

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

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 cuida los otros elementos que se mueven fuera de lugar cuando se expande su menú desplegable. El único inconveniente aquí es que la visualización menulista desaparece cuando selecciona, pero vuelve tan pronto como la haya seleccionado.

Espero que esto ayude a alguien.

2
Derrick

esta es la mejor manera de hacer esto:

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

es exactamente igual que la solución de BalusC. Sólo esto es más fácil. ;)

2
mcmwhfy

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

descargo de responsabilidad: he codificado esa cosa, los parches son bienvenidos

2
PowerKiKi
1
Ybbest

La solución de jQuery BalusC mejoró por mi. Utilizado también: Brad Robertson's comente aquí .

Solo coloque esto en un .js, use la clase amplia para los combos que desee y no intente darle una identificación. Llame a la función en el onload (o documentReady o lo que sea).
Como asno simple que :)
Usará 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');
    })
    }
}
1
Federico Valido

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í Evento de incendio cada vez que se selecciona un elemento DropDownList con jQuery ). Muchas de las otras soluciones aquí utilizan el cambio del 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, foco y mousedown es para cuando el usuario pone el menú desplegable en foco, el desenfoque es para cuando hacen clic.

También es posible que desee incluir algún tipo de detección de navegador en este modo, de modo que solo tenga efecto, es decir. Aunque no se ve mal en otros navegadores

0
RasTheDestroyer

Esto parece funcionar con IE6 y no parece romper otros. La otra cosa agradable 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");
        }
    });

});
0
lhoess

Basado en la solución publicada por Sai , esta es la forma de hacerlo 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:''}); });
});
0
Ahmad Alfy

Tenemos lo mismo en un asp: lista desplegable:

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

0
Harlequin

Puedes agregar un estilo directamente al elemento seleccionado:

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

Por lo tanto, este elemento seleccionado tendrá 200 píxeles de ancho.

Alternativamente, puede aplicar una clase o un id al elemento y hacer referencia a él en una hoja de estilo.

0
Katy

El enlace hedgerwow (la solución alternativa de animación de YUI) en la primera mejor respuesta está roto, supongo que el dominio caducó. Copié el código antes de que expirara, para que pueda encontrarlo aquí (el propietario del código puede avisarme si estoy infringiendo algún derecho de autor al subirlo 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 la creación de un elemento SELECT exactamente igual al normal, usando el menú del botón YUI. ¡Echa un vistazo y hazme saber si esto ayuda!

0
Hammad Tariq

Hasta ahora no hay uno. No sé acerca de 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 la duplicación de la funcionalidad existente.

0
pilsetnieks

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

// código JavaScript

<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}
function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->
</script>

// 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>
0
Arif

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

Pensé que compartiría 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).

0
Aerendel

Pensé que me tiraría el sombrero en el ring. Hago una aplicación SaaS y tuve 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 que todo fuera mejor 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>
0
n0nag0n