javascript - examples - Asunto de la lista desplegable

select option css style examples

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 amplio como para mostrar el texto completo sin expandir la lista desplegable general.

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

Hemos analizado varias formas de utilizar los eventos onfocus, onblur, onchange, keyboard y mouse para intentar resolver el problema, pero aún hay algunos problemas.

Me preguntaba si alguien ha resuelto este problema en IE 6/7 sin usar ningún toolkits / frameworks (YUI, Ext-JS, jQuery, etc.).

Answer 1

¿Sería algo así 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 el mouseover.

Answer 2

El problema es que no queremos que cambie el tamaño automáticamente, vamos a aislar el problema de este problema específico. Si bien estoy de acuerdo en que desde el punto de vista de la usabilidad no es ideal, aún 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 3

¿Cómo está rellenando DropDownList? Estoy usando el siguiente código para rellenar DropDownList y ajusta el ancho de acuerdo con 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(); 
        }

Ah, sí, no define explícitamente el ancho en DropDownList.

Answer 4

Básicamente, si realmente necesita un cuadro de texto REAL, tendrá que elegir uno u otro (definir o no definir 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 compañías se reúnan y digan "esta es la forma en que será. PARA SIEMPRE".

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

Answer 5

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 en, por ejemplo, 7,0. Cuando estipulé el ancho, ya no lo hice.

[EDITAR 2] El único problema es que el cuadro de texto del menú desplegable también se ajusta. Esto puede tirar su UI. Entonces esta puede no ser la solución que estás buscando.

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

Answer 6

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

Answer 7

Yo recomendaría hacer que la selección sea más amplia. 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 haga que la selección sea más amplia. Por lo tanto, desde el punto de vista de la facilidad de uso, aconsejaría solo permitir que el navegador dimensione la selección en función de su contenido, o establecer un ancho lo suficientemente amplio para el valor de los contenidos de la opción más amplia.

Answer 8

Este tipo tenía el mismo problema que tú y se le ocurrió una solución. Es un truco y depende de cómo tengas tu configuración de interfaz de usuario, pero es una opción. Espero que ayude.

editar

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

Buena suerte.

Answer 9

<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 quieras hacer sea posible sin mucho trabajo o usando un marco. Más arriba es algo que debes considerar probar / jugar con ...