Problema dell'elenco a discesa

Question

Sto riscontrando un problema a causa del quale un elenco a discesa in IE 6/7 si comporta come tale:

Puoi vedere che la larghezza del menu a discesa non è abbastanza ampia da visualizzare l'intero testo senza espandere l'elenco a discesa complessivo.

Tuttavia, in Firefox, non vi è alcun problema in quanto espande la larghezza di conseguenza. Questo è il comportamento che vogliamo in IE 6/7:

Abbiamo esaminato vari modi per utilizzare gli eventi onfocus, onblur, onchange, tastiera e mouse per tentare di risolvere il problema, ma ancora alcuni problemi.

Mi chiedevo se qualcuno ha risolto questo problema in IE 6/7 senza utilizzare alcun toolkit / framework (YUI, Ext-JS, jQuery, ecc. & # 8230;).

Answer 1

Questo ragazzo ha avuto lo stesso problema con te e ha trovato una soluzione. È un po 'un trucco e dipende da come hai configurato l'interfaccia utente, ma è un'opzione. Spero che sia d'aiuto.

modifica

Il link che ho iniziato a cercare era in realtà questo , che è lo stesso suggerito da Tim. Penso che sia una soluzione migliore della mia scoperta originale. 2a modifica Questa soluzione in realtà dipende dal framework YUI, ma non immaginerei che replicare l'idea principale dietro di essa sia troppo difficile. Altrimenti, va bene anche il 1 ° link, e molto più semplice.

Buona fortuna.

Answer 2

Qualcosa del genere sarebbe fattibile nella tua situazione?

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

La larghezza del menu a discesa aumenta / diminuisce durante il passaggio del mouse.

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>

Non penso che ciò che vuoi fare sia possibile senza molto lavoro o utilizzando un framework. Sopra c'è qualcosa che dovresti considerare di provare / scherzare con ...

Answer 4

Consiglierei di allargare la selezione. Firefox è amichevole e amplia la larghezza dell'opzione in modo che tu possa vederne il valore, ma ciò non risolve il problema che una volta selezionata un'opzione, non sarai in grado di vedere esattamente ciò che hai selezionato come un utente a meno che non si allarghi la selezione. Quindi, dal punto di vista della facilità d'uso, consiglierei di consentire al browser di ridimensionare la selezione in base al suo contenuto o di impostare una larghezza sufficientemente ampia per il valore del contenuto dell'opzione più ampia.

Answer 5

Il problema è che non vogliamo che si ridimensioni automaticamente, isoliamo il problema a questo specifico problema. Anche se sono d'accordo sul fatto che dal punto di vista dell'usabilità non è l'ideale, vorrei comunque risolvere questo problema.

Abbiamo un elenco a discesa a larghezza fissa e vogliamo che si comporti come in FireFox 7 come mostrato sopra.

Answer 6

Penso che se lasci la larghezza vuota sul controllo, verrà ridimensionata ai dati nel controllo.

[EDIT] Sì, testato in un'app Web vs2005. Aggiunto il controllo e inserito gli oggetti. Si è adattato all'elemento più lungo in es. 7.0 Quando ho stabilito la larghezza non lo faceva più.

[EDIT 2] L'unico problema è che anche la casella di testo del menu a discesa si regola. Questo potrebbe far saltare la tua UI. Quindi questa potrebbe non essere la soluzione che stai cercando.

[EDIT 3] È sicuramente il modo diverso di renderizzare. Penso che l'unico modo per superarlo sia quello di creare il tuo controllo simile a quanto suggerito qui

Answer 7

L'ho provato su IE7 e si espande di conseguenza. Sei sicuro di non utilizzare un qualche tipo di strano CSS che lo costringe ad avere quella dimensione solo in IE 6/7? (È possibile scegliere come target browser specifici utilizzando strani hack del selettore CSS come '* html')

Answer 8

Fondamentalmente, se hai davvero bisogno di una casella di testo ATTUALE, dovrai scegliere l'uno o l'altro (definire o non definire la larghezza). Questo è un classico esempio delle difficoltà nella codifica per tutti i browser conosciuti in uso, e non c'è davvero modo di aggirare fino a quando le aziende non si riuniranno e diranno "questo è il modo in cui sarà. SEMPRE ".

In alternativa, è possibile utilizzare una soluzione domestica come indicato in un'altra risposta. Nel tuo caso, lo consiglierei.

Answer 9

Come si popola l'elenco a discesa. Sto usando il seguente codice per popolare DropDownList e regola la larghezza in base al testo più grande visualizzato:

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ì, non definire esplicitamente la larghezza su DropDownList.