Empfehlungen für dropdown-Menü die Elemente, die zu weit sind?
Welche Optionen habe ich, wenn ein dropdown-Menü ist konfrontiert mit text, der ist so breit, dass eine Erweiterung des Menüs Breite unterzubringen ist nicht möglich? d.h. Er bricht die Seite layout, oder sieht einfach zu hässlich, wenn die dropdown-passend für den langen Artikel.
Abschneiden?
Abschneiden plus voll hover-text?
Nicht erlauben, Elemente, die lange?
Jemand auf irgendwelche elegante Lösungen?
Dank.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich Stimme mit GordonB in Bezug auf das abschneiden der Optionen. Übermäßig lange Optionen können schwer zu Lesen sein, und wie du schon erwähnt hast, es sieht schrecklich.
Wenn dein dropdown ist bevölkert von Benutzereingaben, allerdings würde ich beschränken die Länge. Was kann man mit 15 Worten gesagt werden sollte mit 5 ... wenn es nicht kann, dann vielleicht ein dropdown nicht die beste option.
Zum Beispiel, wenn Ihre Optionen sind die Titel von research papers und Ihrer Autoren, Sie können sich wahrscheinlich kürzen Sie bis auf ein paar wichtige Wörter ("String-Theorie und Sie [Braun 2008]"). Auf der anderen Seite, wenn die Optionen selbst unterscheiden sich nur durch ein paar Worte und verlieren an Bedeutung, wenn Sie abgeschnitten werden (z.B. eine Liste mit Optionen wie "Erdnussbutter-und-traubengelee-sandwich mit Karotten-sticks und Soja-Milch" und "Erdnuss-butter und boysenberry jelly sandwith mit Karotten-sticks und 2% - Milch") vielleicht Sie wäre besser gedient werden, durch anzeigen aller Optionen nacheinander, begleitet durch eine checkbox oder radio-button entsprechend.
(Wenn Sie mit ASP.NET im Grunde sage ich mit einem repeater anstelle einer DropDownList)
Dieser zweite Ansatz könnte auch ermöglichen es Ihnen, auch andere Elemente, die Sie nicht in der Lage sein, um in einem dropdown-Menü. Werfen Sie einen Blick auf das Amazon such-Ergebnis-Seite für Ideen.
Merke ich, ich bin ziemlich spät auf diese Frage, aber ich habe auf der Jagd gewesen für eine Antwort und ich fand eine ziemlich elegante Lösung.
Haben einen Blick hier:
Den ersten link spricht über ein paar Lösungen vor der Empfehlung einer Lösung, basierend auf dem zweiten link.
Die Idee ist, dass auf klicken Sie auf, ändern Sie die Breite der
<select>tag, so dass es groß genug ist zu zeigen, den vollständigen text der Optionen. Durch die Beibehaltung der<select>- tag innerhalb eines div mit overflow set zu 'versteckt', ist es nicht die Schraube mit dem rest der Seite.Probieren Sie es aus - es ist eine ziemlich gute Lösung.
Abschneiden mit tooltip wäre meine Wahl....
Der letzten Zeit hatte ich zu tun, dass ich eine telerik control, die ziemlich " UI-rich.
Geben dem element eine Maximalbreite bei der CSS-Eigenschaft
max-width.Meisten Browser zeigen die Möglichkeiten auf ganzer Breite unabhängig von der dropdown-tatsächliche Breite in der Erwägung, dass der IE schneidet diese auf die Breite von select-box. So das eigentliche problem ist browser-spezifisch.
Habe ich eine Lösung mit absoluter Positionierung auf den dropdown-so konnte ich es verlängern sich die Breite auf hover im IE, ohne zu brechen mein layout. Etwas hacky, aber es ist eine option.
Habe ich mit kommerziellen ASP.NET Steuerung implementiert ist mit <div> statt <select>. Auf diese Weise könnten wir mehrzeiligen Elemente, Stil, wie wir wollten, und einige andere Sachen.
Hängt davon ab, wie weit Sie sind reden, was der Kontext ist. Oft läuft dies auf ein design-problem eher als eine Codierung problem. Wenn der text ist wirklich lang, Sie haben die usability-Probleme unabhängig, da das Lesen langer text in einem dropdown-schwierig ist. Meine Optionen wären:
Wenn das dropdown ist sehr schmal und der längste Artikel sind nicht sehr lang (z.B. 3-4 Worte) ändern Sie das design zu beherbergen.
Wenn der text ist wirklich lang (z.B. Sätze), dann kürzen, wenn Sie können. Manchmal ist text nicht zugänglich, um diese (zB. Sie können mehrere Elemente mit dem gleichen text). Sie können nicht wirklich sagen, Tooltipps der select-Liste posten.
Wenn der text ist wirklich lang und kann nicht gekürzt werden, möchten Sie vielleicht zu prüfen, eine andere option UI-option.
Warum nicht erstellen Sie ein berechnetes Feld, welches auf dem langen Feld.
Nur schaffen es nur die ersten 50 (sagen) Zeichen.
=LINKS([Titel],50)
Verweisen Sie dann in das Feld in der Dropdown-Liste.