Limit Initial Breite der Auswahlliste

Question

Ich habe eine Auswahlliste, wo einige Kunden wahnsinnig lange Optionen für sie eingegeben haben, die das Design bricht. Ich frage mich, ob es eine Möglichkeit gibt, eine feste Breite auf das Auswahl-Widget festzulegen, aber das Dropdown-Menü, das es erzeugt, immer noch breit genug ist, um alle Optionen anzuzeigen.

Answer 1

Nicht sicher, ob Sie überhaupt mit jQuery offen sind, aber ich in der Regel diese Methode:

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

Ist ein bisschen abgehackt, aber sieht besser aus als die Inhalte abschneidet

Answer 2

See the working example here.

Sie müssen nur width auf Ihre Auswahlbox entweder inline oder CSS anzuwenden. Es wird so breit wie Sie angegeben haben, aber wenn Sie darauf klicken, werden alle Optionen mit beliebiger Breite angezeigt.

Answer 3

Ich weiß nicht, ob Sie es mit CSS tun können (Browser-unabhängig), aber hier sind zwei weitere Lösungen:

1. Statt der Anzeige „seeeeehr looooooooooong teeeeeeeeext“ Sie können loooo so etwas wie „seeeeehr anzuzeigen. .. ";

2. Erstellen Sie Ihre Auswahl mit divs und lists, wenn es geschlossen ist, um eine bestimmte Breite zu haben und wenn Sie etwas wie einen Pfeil drücken, um die volle Breite anzuzeigen. (Ich bin mir nicht sicher, ob du verstehst, was ich damit sagen will ....).

Answer 4

Wenn die Liste, die Sie haben (die Einträge in <select>) sind Benutzer eingegeben, und der Benutzer kann sagen, sagen 500 Zeichen, die sie sie sicher werden.

In diesem Fall würde ich nicht für eine <select> Liste gehen, aber eine benutzerdefinierte Liste mit gebaut, sagen ein <div>.

Dies ist nicht schwer, alles, was Sie brauchen, ist

ein div, der die Standard Option enthält,
eine versteckte div mit allen Optionen
Wenn der Benutzer die Möglichkeit, die versteckten div zeigen Standard klickt
bei Klick auf die Elemente in der versteckten div (das jetzt sichtbar ist), dass das ausgewählte Element in der ersten div dort

Vielleicht schon jquery Plugin dafür. aber ich bin mir nicht sicher, ob du offen für jquery bist, ich bin sowieso kein jquery experte.

Ich kenne diese vergleichsweise mehr Aufwand als eine select, aber ich denke, es ist die Mühe wert. All die Hacks - erweitern Sie die div onmouseover, onclick etc nicht gut aussehen, könnte immer noch Ihr Design zu brechen, und je nach der Menge der Daten, die der Benutzer eingeben kann, wäre immer noch nicht effektiv.

In der benutzerdefinierten Liste Ansatz können Sie die Elemente umhüllen, so dass Sie die vollständige Kontrolle haben.

Answer 5

an die CSS so etwas wie dies hinzufügen:

select { 
    border: 1px solid #838383; 
    border-style: outset; 
    font-weight: bold; 
    color: #3F3F3F; 
    max-width: 150px !important; 
    overflow: hidden; 
} 

option { 
    max-width: 120px !important; 
    overflow: hidden; 
} 

Dies funktioniert für mich. Hinweis: Es gibt keine Punkte vor den Ankern.

Answer 6

Da Sie nicht angeben, welche Browserunterstützung Sie benötigen, kann dies eine Lösung sein oder auch nicht. Dies funktioniert in den meisten Browsern IE9 +

select { 
    width: 100%; 
    max-width: 150px; 
} 

Kurz und süß. Wenn es erweitert wird, zeigt select den gesamten Text an (es sei denn, es überschreitet das Ansichtsfenster!).