Problème de liste déroulante

Question

Je rencontre un problème où une liste déroulante dans IE 6/7 se comporte comme tel:

Vous pouvez constater que la largeur de la liste déroulante n'est pas assez large pour afficher l'intégralité du texte sans développer la liste déroulante globale.

Cependant, dans Firefox, il n’ya pas de problème car il élargit la largeur en conséquence. C’est le comportement que nous voulons dans IE 6/7:

Nous avons envisagé diverses manières d'utiliser les événements onfocus, onblur, onchange, clavier et souris pour tenter de résoudre le problème, tout en maintenant quelques problèmes.

Je me demandais si quelqu'un avait résolu ce problème dans IE 6/7 sans utiliser de toolkits / frameworks (YUI, Ext-JS, jQuery, etc.).

Answer 1

Ce gars a eu le même problème que vous et il a trouvé une solution. C'est un peu un bidouillage et dépend de la façon dont vous avez configuré votre interface utilisateur, mais c'est une option. J'espère que ça aide.

modifier

Le lien que j'ai commencé à rechercher était en réalité celui-ci , qui est le même que Tim a suggéré. Je pense que c'est une meilleure solution que ma découverte originale. 2e édition : cette solution dépend en fait du cadre YUI, mais je n’imagine pas qu’on puisse reproduire l’idée principale de son caractère trop dur. Sinon, le 1er lien est également correct, et beaucoup plus simple.

Bonne chance.

Answer 2

Est-ce que quelque chose comme ce serait faisable dans votre situation?

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

La largeur de la liste déroulante augmente / diminue au passage d'une souris.

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>

Je ne pense pas que ce que vous voulez faire soit possible sans beaucoup de travail ou en utilisant un cadre. Ci-dessus, voici quelque chose que vous devriez envisager d'essayer / de déconner ...

Answer 4

Je recommanderais d'élargir la sélection. Firefox est sympathique à ce sujet et étend la largeur de l’option afin que vous puissiez voir sa valeur, mais cela ne résout pas le problème suivant: une fois que vous avez sélectionné une option, vous ne pourrez plus voir exactement ce que vous avez sélectionné. un utilisateur, sauf si vous élargissez la sélection. Donc, du point de vue de la convivialité, je conseillerais simplement de laisser le navigateur dimensionner la sélection en fonction de son contenu ou de définir une largeur suffisamment large pour la valeur du contenu de la plus large option.

Answer 5

Le problème, c'est que nous ne voulons pas qu'il se redimensionne automatiquement, isolons le problème de ce problème spécifique. Bien que je convienne que, du point de vue de la convivialité, ce n’est pas idéal, je voudrais tout de même résoudre ce problème.

Nous avons une liste déroulante de largeur fixe et nous voulons qu'elle se comporte comme dans FireFox 7, comme indiqué ci-dessus.

Answer 6

Je pense que si vous laissez la largeur vide sur le contrôle, cela redimensionnera les données du contrôle.

[EDIT] Oui, testé dans une application Web vs2005. Ajout du contrôle et insertion des éléments. Réglage de l'élément le plus long, c’est-à-dire 7,0. Lorsque j’ai précisé la largeur, cela n’a plus été fait.

[EDIT 2] Le seul problème est que la zone de texte de la liste déroulante s’ajuste également. Cela peut jeter votre interface utilisateur. Donc, ce n'est peut-être pas la solution que vous recherchez.

[EDIT 3] C’est bien leur rendu différent. Je pense que la seule façon de surmonter ce problème est de créer votre propre contrôle, similaire à ce qui a été suggéré ici

Answer 7

J'ai testé cela sur IE7 et il s'agrandit en conséquence. Êtes-vous sûr de ne pas utiliser une sorte de CSS étrange qui force cette taille uniquement dans IE 6/7? (Il est possible de cibler des navigateurs spécifiques à l'aide de hacks de sélecteur CSS étranges, tels que '* html')

Answer 8

En gros, si vous avez vraiment besoin d’une zone de texte ACTUAL, vous devrez choisir l’une ou l’autre (définissez ou non la largeur). C’est un exemple classique des difficultés de codage pour tous les navigateurs connus utilisés, et il n’ya vraiment aucun moyen de le contourner tant que les entreprises ne se sont pas réunies pour se dire: «C’est ainsi que les choses se passeront. FOREVER ".

Comme alternative, vous pouvez utiliser une solution maison, comme indiqué dans une autre réponse. Dans votre cas, je le recommanderais.

Answer 9

Comment remplissez-vous la DropDownList. J'utilise le code suivant pour remplir DropDownList et il ajuste la largeur en fonction du plus grand texte affiché:

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 oui, ne définissez pas explicitement la largeur dans DropDownList.