Drop-Down-Liste Ausgabe

Question

Ich habe ein Problem, wo ein Dropdown-Liste in IE 6/7 als solche verhalten:

Sie sehen, dass die Drop-Down-Breite nicht breit genug ist, ohne den Ausbau der Gesamt Dropdown-Liste, um den gesamten Text anzuzeigen.

Doch in Firefox, gibt es kein Problem, da sie die Breite entsprechend erweitert. Dies ist das Verhalten, das wir in IE wollen 6/7:

Wir haben auf verschiedenen Wegen gesucht, die onfocus, onblur, Onchange, Tastatur und Maus-Ereignisse zu nutzen, um zu versuchen, das Problem zu lösen, aber immer noch einige Probleme.

Ich habe mich gefragt, ob jemand dieses Problem in IE 6/7 gelöst hat, ohne Toolkits / Frameworks (YUI, Ext-JS, jQuery, etc ...).

Answer 1

Dieser Typ das gleiche Problem wie du hatte, und er kam mit einer Lösung auf. Es ist ein bisschen wie ein Hack und hängt davon ab, wie Sie Ihren UI-Setup haben, aber es ist eine Option. Ich hoffe, es hilft.

Bearbeiten

Die Verbindung, die ich auf der Suche begann für eigentlich diesen , das ist die gleiche Tim vorgeschlagen. Ich denke, es ist eine bessere Lösung als meine ursprüngliche Entdeckung. 2.es Bearbeiten Diese Lösung ist tatsächlich abhängig von der YUI Framework, aber ich würde nicht vorstellen, dass die Grundidee hinter replizierende es zu hart. Ansonsten ist die erste Verbindung in Ordnung zu, und viel einfacher.

Viel Glück.

Answer 2

wäre so etwas wie dies in Ihrer Situation machbar sein?

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

Die Breite des Drop-Down wächst / schrumpft während einer Maus darüber geht.

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>

Ich glaube nicht, was Sie wollen, ohne viel Arbeit möglich ist, zu tun oder einen Rahmen verwenden. Oben ist etwas für Dich mit ...

versuchen / messing zu betrachten

Answer 4

Ich würde empfehlen, die Auswahl breiter zu machen. Firefox ist freundlich darüber und erweitert die Breite der Option, so dass Sie seinen Wert sehen können, aber das löst nicht das Problem, dass, sobald Sie eine Option ausgewählt haben, werden Sie nicht in der Lage genau zu sehen, was Sie ausgewählt als ein Benutzer, wenn Sie die Auswahl verbreitern. So von einem Benutzerfreundlichkeit Sicht würde ich raten, einfach den Browser Größe ermöglicht die Auswahl basierend auf deren Inhalt, oder eine Breite eingestellt, die für den Wert der breitesten Option Inhalt breit genug ist.

Answer 5

Das Problem ist, dass wir nicht wollen, es automatisch, um die Größe, lassen Sie sich das Problem zu diesem spezifischen Problem isolieren. Während ich, dass aus Usability-Sicht zustimmen, dass es nicht ideal, ich möchte noch dieses Problem lösen.

Wir haben eine feste Breite der Dropdown-Liste, und wir wollen es wie in FireFox 7 verhalten haben, wie oben angezeigt.

Answer 6

Ich glaube, wenn Sie die Breite leer auf dem Steuer lassen Sie es auf die Daten in der Steuer Größe ändern wird.

[EDIT] Ja, getestet in einem VS2005 Web-App. Hinzugefügt wurde die Kontrolle und die Einzelteile in. Es angepasst an das längste Element in dh 7,0 Wenn ich die Breite festgelegt es nicht mehr das getan hat.

[EDIT 2] Das einzige Problem ist, dass die Textbox des Dropdown paßt auch. Dies kann die Benutzeroberfläche abwerfen. So kann dies nicht die Lösung, die Sie suchen.

[EDIT 3] Es ist definitiv die andere Art und Weise sie machen. Ich denke, der einzige Weg, dies zu überwinden könnte, ist Ihre eigene Steuerung ähnlich zu schaffen, was vorgeschlagen wurde,

Getestet habe ich diese auf IE7 und es dehnt sich entsprechend. Sind Sie sicher, dass Sie nicht eine Art seltsamer CSS, dass es die Größe nur in IE 6/7 zu sein zwingt? (Es ist möglich, bestimmten Browser mit seltsamen CSS-Selektor-Hacks wie ‚* html‘ Ziel)

Grundsätzlich, wenn Sie wirklich ein tatsächliches Textbox tun müssen, müssen Sie das eine oder andere (definieren oder nicht definiert die Breite) wählen. Dies ist ein klassisches Beispiel für die Schwierigkeiten bei der Codierung für alle bekannten Browser verwendet wird, und es gibt wirklich keinen Weg darum herum, bis Unternehmen zusammen kommen und sagen: „Das ist die Art, wie es geht zu sein. FÜR IMMER“.

Als Alternative könnten Sie eine home-grown-Lösung verwenden, wie in einer anderen Antwort erwähnt. In Ihrem Fall würde ich es empfehlen.

Wie bevölkern Sie die Dropdownlist. Ich verwende den folgenden Code, um die Dropdownlist zu füllen und sie paßt die Breite entsprechend den größten Text angezeigt:

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 ja nicht explizit die Breite auf dem Dropdownlist definieren.

Answer 7

Answer 8

Answer 9

Getestet habe ich diese auf IE7 und es dehnt sich entsprechend. Sind Sie sicher, dass Sie nicht eine Art seltsamer CSS, dass es die Größe nur in IE 6/7 zu sein zwingt? (Es ist möglich, bestimmten Browser mit seltsamen CSS-Selektor-Hacks wie ‚* html‘ Ziel)

Answer 10

Grundsätzlich, wenn Sie wirklich ein tatsächliches Textbox tun müssen, müssen Sie das eine oder andere (definieren oder nicht definiert die Breite) wählen. Dies ist ein klassisches Beispiel für die Schwierigkeiten bei der Codierung für alle bekannten Browser verwendet wird, und es gibt wirklich keinen Weg darum herum, bis Unternehmen zusammen kommen und sagen: „Das ist die Art, wie es geht zu sein. FÜR IMMER“.

Als Alternative könnten Sie eine home-grown-Lösung verwenden, wie in einer anderen Antwort erwähnt. In Ihrem Fall würde ich es empfehlen.

Wie bevölkern Sie die Dropdownlist. Ich verwende den folgenden Code, um die Dropdownlist zu füllen und sie paßt die Breite entsprechend den größten Text angezeigt:

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 ja nicht explizit die Breite auf dem Dropdownlist definieren.

Answer 11

Grundsätzlich, wenn Sie wirklich ein tatsächliches Textbox tun müssen, müssen Sie das eine oder andere (definieren oder nicht definiert die Breite) wählen. Dies ist ein klassisches Beispiel für die Schwierigkeiten bei der Codierung für alle bekannten Browser verwendet wird, und es gibt wirklich keinen Weg darum herum, bis Unternehmen zusammen kommen und sagen: „Das ist die Art, wie es geht zu sein. FÜR IMMER“.

Als Alternative könnten Sie eine home-grown-Lösung verwenden, wie in einer anderen Antwort erwähnt. In Ihrem Fall würde ich es empfehlen.

Answer 12

Wie bevölkern Sie die Dropdownlist. Ich verwende den folgenden Code, um die Dropdownlist zu füllen und sie paßt die Breite entsprechend den größten Text angezeigt:

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 ja nicht explizit die Breite auf dem Dropdownlist definieren.

Answer 13

Answer 14