Problema de la lista desplegable

Question

Tengo un problema donde una lista desplegable en IE 6/7 se comporta como tal:

Puede ver que el ancho desplegable no es lo suficientemente ancho como para mostrar el texto completo sin expandir la lista desplegable general.

Sin embargo, en Firefox, no hay problema ya que se expande el ancho en consecuencia. Este es el comportamiento que queremos en IE 6/7:

Hemos examinado varias formas de utilizar los eventos onfocus, onblur, onchange, teclado y mouse para intentar resolver el problema, pero sigue habiendo algunos problemas.

Me preguntaba si alguien ha resuelto este problema en IE 6/7 sin usar ningún kit de herramientas / marcos (YUI, Ext-JS, jQuery, etc. & # 8230;).

Answer 1

Este chico tuvo el mismo problema que usted y se le ocurrió una solución. Es un truco y depende de cómo tenga su configuración de UI, pero es una opción. Espero que ayude.

edit

El enlace que empecé a buscar era en realidad este , que es el mismo que Tim sugirió. Creo que es una solución mejor que mi hallazgo original. Segunda edición Esta solución depende en realidad del marco YUI, pero no me imagino que la idea principal detrás de esto sea demasiado difícil. De lo contrario, el primer enlace también está bien, y es mucho más simple.

Buena suerte.

Answer 2

¿Se podría hacer algo como esto en su situación?

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

El ancho del menú desplegable aumenta / disminuye durante un mouseover.

Answer 3

<script type="text/javascript">
    var MAX_WIDTH = 500; //the biggest width the select is allowed to be

    function biggestOption(elem) {
        var biggest = 0;
        for (var i=0;i<elem.options.length;i++) {
            if ( elem.options[i].innerHTML.length > biggest ) {
                biggest = elem.options[i].innerHTML.length;
            }
        }
        return roughPixelSize(biggest);
    }

    function roughPixelSize(charLength) {
        //this is far from perfect charLength to pixel
        //but it works for proof of concept
        roughSize =  30 + (charLength * 6);
        if (roughSize > MAX_WIDTH) {
            return MAX_WIDTH;
        } else {
            return roughSize;
        }
    }

    function resizeToBiggest(elem) {
        elem.style.width = biggestOption(elem);
    }

    function resizeToSelected(elem) {
        elem.style.width = roughPixelSize(elem.options[elem.selectedIndex].innerHTML.length);
    }

</script>

<select onmouseover="resizeToBiggest(this)" style="width:70px" onchange="resizeToSelected(this)" onblur="resizeToSelected(this)" >
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
    <option>this is some really really realy long text</option>
    <option>test 4</option>
    <option>test 5</option>
</select>

No creo que lo que quieres hacer sea posible sin mucho trabajo o utilizando un marco. Arriba hay algo para que consideres intentar / jugar con ...

Answer 4

Recomendaría ampliar la selección. Firefox es amigable al respecto y amplía el ancho de la opción para que pueda ver su valor, pero eso no resuelve el problema de que una vez que haya seleccionado una opción, no podrá ver exactamente lo que seleccionó como un usuario a menos que amplíe la selección. Por lo tanto, desde el punto de vista de la facilidad de uso, recomendaría simplemente permitir que el navegador dimensione la selección en función de su contenido, o establecer un ancho que sea lo suficientemente ancho para el valor del contenido de la opción más amplia.

Answer 5

El problema, es que no queremos que cambie de tamaño automáticamente, vamos a aislar el problema a este problema específico. Si bien estoy de acuerdo en que, desde el punto de vista de la usabilidad, no es lo ideal, todavía me gustaría resolver este problema.

Tenemos una lista desplegable de ancho fijo, y queremos que se comporte como en FireFox 7 como se muestra arriba.

Answer 6

Creo que si deja el ancho en blanco en el control, cambiará el tamaño de los datos en el control.

[EDITAR] Sí, lo probé en una aplicación web vs2005. Se agregó el control y se colocaron los elementos. Se ajustó al elemento más largo, es decir, 7.0. Cuando estipulé el ancho, ya no se hizo esto.

[EDIT 2] El único problema es que el cuadro de texto del menú desplegable también se ajusta. Esto puede sacudir su interfaz de usuario. Por lo tanto, esta puede no ser la solución que está buscando.

[EDIT 3] Definitivamente es la forma diferente de renderizar. Creo que la única forma de superar esto es crear su propio control similar a lo que se sugirió aquí

Answer 7

Probé esto en IE7 y se expande en consecuencia. ¿Estás seguro de que no estás utilizando algún tipo de CSS extraño que obliga a tener ese tamaño solo en IE 6/7? (Es posible apuntar a navegadores específicos usando hacks de selector de CSS extraños, como '* html')

Answer 8

Básicamente, si realmente necesita un cuadro de texto REAL, deberá elegir uno u otro (defina o no el ancho). Este es un ejemplo clásico de las dificultades en la codificación de todos los navegadores conocidos que se utilizan, y realmente no hay forma de evitarlo hasta que las empresas se unan y digan "así será". PARA SIEMPRE " ;.

Como alternativa, puede usar una solución local como se menciona en otra respuesta. En su caso, lo recomendaría.

Answer 9

¿Cómo estás poblando la lista desplegable? Estoy utilizando el siguiente código para llenar DropDownList y ajusta el ancho según el texto más grande que se muestra:

private void BindData()
        {
            List<Foo> list = new List<Foo>();
            list.Add(new Foo("Hello"));
            list.Add(new Foo("bye bye"));
            list.Add(new Foo("this is a reall asd a s das d asd as da sf gfa sda sd asdasd a"));

            ddl1.DataSource = list;
            ddl1.DataTextField = "Text"; 
            ddl1.DataBind(); 
        }

Oh, sí, no defina explícitamente el ancho en la lista desplegable.