Firefox: DropDown-Menü-Breite bei langen Einträgen (Option-Tags)

[TheBestIsaac]

Hallo zusammen! :)

Mir stellt sich gerade folgendes Problem zu dem ich bisher keine Lösung gefunden habe:

Ich habe auf meiner Seite ein Select-Steuerelement dem ich als Breite 100% zuweise, dieses Element ist wiederrum in einer Tabellenzelle das selbst noch mal eine Einschränkung der Breite hat.
Auf der Serverseite (ASP.NET) fülle ich diese Select-Box mit *vielen* Einträgen, die mitunter *sehr* lange Texte enthalten können. Firefox ist jetzt so "schlau", und verbreitert das DropDown-Menü der Select sodass der längste Eintrag reinpasst. Jetzt führt das bei mir dazu, dass das DropDown-Menü sogar über den Bildschirmrand hinausgeht, was natürlich sehr bescheiden aussieht. Der Internet Explorer hingegen richtet die Breite des DropDown-Menüs an der Breite des Select-Elements aus. Überlange Einträge werden einfach abgeschnitten dargestellt.

Ich habe jetzt zahlreiche Foreneinträge gefunden, in denen dem IE ein Fehlverhalten zugesprochen wird und wo eine Funktionsweise ähnlich dem des FF gefordert wird. Bei mir liegt aber genau der umgekehrte Fall vor. Ich finde nämlich das Verhalten des FF falsch und das vom IE richtig. Gibt es eine Möglichkeit, auch dem Firefox beizubringen, sich "richtig" zu verhalten? Habe schon einige Möglichkeiten mit den CSS-Eigenschaften overflow, width und max-width ausprobiert, sowohl auf select als auch auf option angewendet. Richtig gefruchtet hat allerdings nichts wirklich.

Ich hoffe hier kann mir jemand weiterhelfen. Danke schonmal im Voraus! :)

Grüße,
Andreas

P.S.: Bitte gebt mir nicht den Ratschlag, die überlangen Einträge auf der Serverseite schon zu kürzen. Die Nachteile liegen ja wohl klar auf der Hand.

[Felix Riesterer]

Lieber TheBestIsaac,

Ich finde nämlich das Verhalten des FF falsch und das vom IE richtig.

gottseidank ist es völlig unerheblich, was Du in dieser Angelegenheit findest. Denn wenn der IE (welcher denn eigentlich?) in Sachen Darstellung angeblich etwas "richtig" und der FF "falsch" machen soll, dann spricht ein Seitenbastler, der die Standards noch nicht ganz intus hat.

Gibt es eine Möglichkeit, auch dem Firefox beizubringen, sich "richtig" zu verhalten?

Denke umgekehrt: Wie kann ich im Rahmen der Standards dem FF beibringen, wie er sich zu verhalten hat, damit es in allen echten Browsern so aussieht, wie es der IE aus Versehen bereits jetzt schon tut?

Finde in der Doku die CSS-Eigenschaft "overflow" und experimentiere damit ein wenig. Melde Dich dann wieder in diesem Thread um über Deine (Teil-?)Erfolge zu berichten.

P.S.: Bitte gebt mir nicht den Ratschlag, die überlangen Einträge auf der Serverseite schon zu kürzen. Die Nachteile liegen ja wohl klar auf der Hand.

Tun sie nicht. Warum sollte dieser Ratschlag kein vernünftiger sein?

Liebe Grüße,

Felix Riesterer.

[TheBestIsaac]

Hallo Felix! :)

gottseidank

Ja, ich danke immer Gott, er ist auch der einzige, dem Dank gebührt. :)

ist es völlig unerheblich, was Du in dieser Angelegenheit findest. Denn wenn der IE (welcher denn eigentlich?)

Getestet mit Version 6-8

in Sachen Darstellung angeblich etwas "richtig" und der FF "falsch" machen soll, dann spricht ein Seitenbastler, der die Standards noch nicht ganz intus hat.

Den "Seitenbastler" will ich mal überlesen haben...
Und ja, ich finde tatsächlich das Verhalten des IE richtiger, als das des FF. Mag vielleicht nicht mit dem HTML-Standard übereinstimmen, aber darüber habe ich es auch gar nicht gehabt. Mir ging es lediglich um die LOGIK hinter dem Verhalten.
Dass ich die Seitenstandards nicht ganz "intus" hab, damit könntest du recht haben, wenn du meinst, dass ich sie nicht in- und auswendig kenne. Trotzdem bin ich selbst jemand, der sich selber darum bemüht, die Standards einzuhalten, soweit ich sie kenne.
Dennoch bin ich hauptberuflich KEIN Webentwickler (GOTT sei dank) :), deshalb erwarte ich von mir selbst auch gar nicht, ein Profi auf dem Gebiet zu sein, weshalb ich ja auch in dieses Forum geschrieben habe. ;)

Du kannst dir ja mal folgende beiden Screenshots anschauen. Ich finde wie gesagt das FF-Verhalten falsch:

http://isaac.aquilatech.org/pictures/ie.png
http://isaac.aquilatech.org/pictures/ff.png

Denke umgekehrt: Wie kann ich im Rahmen der Standards dem FF beibringen, wie er sich zu verhalten hat, damit es in allen echten Browsern so aussieht, wie es der IE aus Versehen bereits jetzt schon tut?

Ja, das habe ich bereits getan. ;)

Finde in der Doku die CSS-Eigenschaft "overflow" und experimentiere damit ein wenig. Melde Dich dann wieder in diesem Thread um über Deine (Teil-?)Erfolge zu berichten.

Habe ich, wie geschrieben, auch schon getan. Aber ist ok, ich werde es mir ein ander mal in Ruhe anschauen, wenn ich wieder Zeit habe.
Ich ging nur davon aus, hier vielleicht eine schnelle und hilfreiche Antwort zu bekommen, ohne "Schlaumeier"-Kommentare. Sorry für den Seitenhieb, nicht persönlich nehmen. :)

Tun sie nicht. Warum sollte dieser Ratschlag kein vernünftiger sein?

Hier mal die Nachteile, die mir spontan einfallen:
1. Informationsverlust
2. zusätzlicher Programmieraufwand auf der Serverseite, der eigentlich nicht nötig ist
3. willkürliche Festlegung der maximalen Eintragslänge
4. abgeschnittene Einträge, wenn die ComboBox aufgrund eines sehr breiten Bildschirms tatsächlich vollständig angezeigt werden kann

Jetzt darfst du mir gerne die Vorteile dieser Lösung nennen, dann kann ich die beiden Seiten abwägen. :)

Liebe Grüße,

Andreas

[Der Martin]

Hallo miteinander,

Du kannst dir ja mal folgende beiden Screenshots anschauen. Ich finde wie gesagt das FF-Verhalten falsch:
http://isaac.aquilatech.org/pictures/ie.png
http://isaac.aquilatech.org/pictures/ff.png

falls euch das beruhigt: In diesem Fall macht es keiner der beiden Browser falsch.
Die Maße der *ausgeklappten* Liste sind nämlich nicht festgelegt - HTML/CSS kann weder beeinflussen, wieviele Einträge im aufgeklappten Zustand sichtbar sind (Höhe der Liste), noch wie breit sie angezeigt werden (Breite der Liste). Der Browserhersteller darf hier also nach eigenem Ermessen die Darstellung wählen, die er für angebracht hält.

Ich verstehe allerdings nicht, was dich am Verhalten des FF hier stört. Ich hätte erwartet, dass du es positiv bewertest, wenn er die aufgeklappte Liste bei Bedarf schon von sich aus verbreitert. Überlange Einträge sind dann zwar immer noch abgeschnitten, aber der IE schneidet sie ja schon an der Breite des select-Elements ab. Wenn du also schon mit Informationsverlust argumentierst - der ist im IE größer, weil früher abgeschnitten wird.

Falls du es nicht schon getan hast, würde ich mal versuchen, den option-Elementen eine Breite von 100% zu geben - in der Hoffnung, dass der FF das berücksichtigt. Immerhin nimmt er ja auch Schrift- und Hintergrundformatierungen bei option-Elementen zur Kenntnis. In diesem Fall habe ich allerdings wenig Hoffnung. Dann wären sie im FF so breit wie im IE.

Ich ging nur davon aus, hier vielleicht eine schnelle und hilfreiche Antwort zu bekommen, ohne "Schlaumeier"-Kommentare. Sorry für den Seitenhieb, nicht persönlich nehmen. :)

Oh, mit den Schlaumeier-Kommentaren musst du hier immer rechnen; manchmal sind sie auf den zweiten Blick sogar wertvoller, als es zunächst scheint.

So long,
 Martin

[TheBestIsaac]

Hallo Martin,

Ich verstehe allerdings nicht, was dich am Verhalten des FF hier stört. Ich hätte erwartet, dass du es positiv bewertest, wenn er die aufgeklappte Liste bei Bedarf schon von sich aus verbreitert.

Grundsätzlich ja, aber:

Überlange Einträge sind dann zwar immer noch abgeschnitten, aber der IE schneidet sie ja schon an der Breite des select-Elements ab. Wenn du also schon mit Informationsverlust argumentierst - der ist im IE größer, weil früher abgeschnitten wird.

Der Unterschied beim Informationsverlust-Argument ist, dass bei der Lösung, die Einträge manuell zu kürzen, dieser Informationsverlust hardcodiert ist. Die Information ist GANZ weg. So allerdings bleibt der vollständige Text zumindest im Quellcode erhalten. Dass der Informationsverlust im IE größer ist, nehme ich gerne in Kauf, denn die Informationen sind in meinem Fall nicht von so großer Wichtigkeit, dass sie vollständig sichtbar sein müssen, da es nur eine Zusatzinformation ist. Was mich am FF jetzt explizit stört ist, dass die Liste so breit wird, dass sie über den Bildschirmrand geht. Und hier geht ein Teil der Usability der ComboBox verloren, denn der Scrollbalken ist nicht erreichbar => User ohne Scrollrad an der Maus haben ein Problem und die Navigation über die Pfeiltasten scheint mir unergonomisch. Generell sehe ich es also schon als positiv an, dass der FF es gut meint und versucht die kompletten Infos anzuzeigen, aber die Browserhersteller hätten ja wenigstens eine Grenze beim Bildschirmrand setzen können...

Falls du es nicht schon getan hast, würde ich mal versuchen, den option-Elementen eine Breite von 100% zu geben - in der Hoffnung, dass der FF das berücksichtigt. Immerhin nimmt er ja auch Schrift- und Hintergrundformatierungen bei option-Elementen zur Kenntnis. In diesem Fall habe ich allerdings wenig Hoffnung. Dann wären sie im FF so breit wie im IE.

Habe ich schon versucht, bringt leider auch nichts. ^^
Einen Teilerfolg erreicht man allerdings, wenn man dem Element einen Pixelwert als Breite verpasst, damit kann ich wenigstens die aufgeklappte Liste auf die korrekte Breite bringen (bzw., wenn man es ganz genau mit der CSS-Definition nimmt ist das auch wieder falsch):
http://isaac.aquilatech.org/pictures/ff2.png

Die Liste ist also jetzt so breit wie die ComboBox, aber die ausgewählten Textelemente werden abgeschnitten (die nicht-selektierten werden komplett dargestellt, weil ich overflow:visible gesetzt habe).

Jetzt könnte man ja sagen, dann bräuchte ich ja nur die absolute Breite des Select-Elements zu übergeben. Problem ist: 1. Weiß ich die genaue Breite nicht, da das Select-Element als width 100% hat und sich die tatsächliche Breite über die übergeordnete Tabellenzellenbreite regelt (die wiederrum variabel ist, je nach Fenstergröße), zweitens wäre das eine Ausnahmeregel und keine allgemeingültige.

Oh, mit den Schlaumeier-Kommentaren musst du hier immer rechnen; manchmal sind sie auf den zweiten Blick sogar wertvoller, als es zunächst scheint.

Ja, mit sowas muss man wohl in jedem Forum rechnen. :)
Was mich nur ein wenig gestört hat, war, dass Felix anscheinend (!) der Meinung war, ich hätte mich nicht wirklich mit dem Problem befasst und würde nur irgendetwas "basteln". Ich bin nämlich definitiv kein Hobbyentwickler. ;)

Und natürlich ist es immer besser, den Hilfesuchenden lieber beizubringen, das Problem zu verstehen anstatt dass man ihnen die vorgekaute Lösung gibt. Ich finde allerdings nicht, dass ich das Problem nicht ausreichend verstanden habe, und verschiedene Lösungswege habe ich wie gesagt auch schon zuvor ausprobiert. :)

Grüße,

Andreas

[Der Martin]

Hi Andreas,

Ich verstehe allerdings nicht, was dich am Verhalten des FF hier stört. Ich hätte erwartet, dass du es positiv bewertest, wenn er die aufgeklappte Liste bei Bedarf schon von sich aus verbreitert.
Grundsätzlich ja, aber:
Überlange Einträge sind dann zwar immer noch abgeschnitten, aber der IE schneidet sie ja schon an der Breite des select-Elements ab. Wenn du also schon mit Informationsverlust argumentierst - der ist im IE größer, weil früher abgeschnitten wird.
Der Unterschied beim Informationsverlust-Argument ist, dass bei der Lösung, die Einträge manuell zu kürzen, ...

oh, dann habe ich dich wohl komplett missverstanden. Das manuelle Kürzen hatte ich gar nicht in Betracht gezogen; ich dachte, du beklagst dich darüber, dass IE an der Kante des select-Elements abschneidet und FF unter Umständen erst am Bildschirmrand.

Was mich am FF jetzt explizit stört ist, dass die Liste so breit wird, dass sie über den Bildschirmrand geht. Und hier geht ein Teil der Usability der ComboBox verloren, denn der Scrollbalken ist nicht erreichbar => User ohne Scrollrad an der Maus haben ein Problem und die Navigation über die Pfeiltasten scheint mir unergonomisch.

Das ist ein Punkt. Das hätte ich allerdings nie als Schwachstelle wahrgenommen, da ich select-Listen quasi ausschließlich mit den Pfeiltasten bediene, weil ich das am intuitivsten finde.

Generell sehe ich es also schon als positiv an, dass der FF es gut meint und versucht die kompletten Infos anzuzeigen, aber die Browserhersteller hätten ja wenigstens eine Grenze beim Bildschirmrand setzen können...

Stimmt, das muss ich zugeben.

Die Liste ist also jetzt so breit wie die ComboBox, aber die ausgewählten Textelemente werden abgeschnitten (die nicht-selektierten werden komplett dargestellt, weil ich overflow:visible gesetzt habe).

Hä? Das ist ja ganz merkwürdig ...

So long,
 Martin

[TheBestIsaac]

Hi Martin! :)

Hä? Das ist ja ganz merkwürdig ...

Ja das kann man wohl laut sagen. :)

Naja, wie es scheint gibt es wohl keine zufriedenstellende Lösung, schade! Muss ich mich halt damit abfinden, ist auch nicht weiter tragisch, wenn auch ärgerlich.

Liebe Grüße,

Andi