✔ DropDown mit fester Breite die sich bei Klick ändert

[TribunM]

Hallo Leute

Wie ich den Internet Explorer hasse. Warum muss der immer etwas anders machen als alle anderen Browser********

Na ja im konkreten geht es um folgendes.

Ich habe ein Menü mit fester Breite in dem ein Dropdown ist. Darin werden Artikelnummern angezeigt mit den Artikelname. Das Dropdown ist mit einer festen breite versehen, so dass nur die Artikelnummern direkt angezeigt werden. Mit einem Klick auf das Dropdown zeigt er dann Artikelnummer: Artikelname an. Klappt in allen Browsern nur in diesem f*** Internet Explorer nicht, weil der die Breite "richtigerweise" als fix ansieht.

So sieht das aus:

<select style="width: 60px;" name="bilder_id[560]">
<option value="11877">11877: Das ist mein Titel </option>
</select>

Wie kann ich das so lösen, dass auch der Internet Explorer die Geschichte frisst?
Man kann das mit javascript lösen, aber da muss es doch auch eine andere Möglichkeit geben****?

Vielen Dank für eure Hilfe

Tribbi

 

[SpiceLab]

Im Falle vom IE geht's meines Wissens nur unter erwähntem JS-Zusatz, oder halt ohne width:60px-Regel.

 

[TribunM]

Der IE ist echt die Geißel des Internets. Mit der Javascript Variante ist wirklich nicht optimal, aber wenn es wirklich keine andere Möglichkeit gibt...

Ein Problem habe ich da aber noch mit der Breite nach Klick. Definiere ich feste px schneidet er ggf. die Titel ab, mache ich das zu groß sieht das auch mist aus. Wenn ich % nutze oder max-width nimmt er immer den maximal Wert, alles nix.

Gibt es da eine andere Möglkichkeit, wie man wenigstens das mit der Breite lösen kann, wenn es ohne Javascript schon nicht geht?

 

[TribunM]

Also habe das ganze mit Javascript jetzt gelöst und damit nur der IE diese Javascript Funktion nutzt conditional comments verwendet.

Das klappt auch bis auf noch das Problem mit der Größe des Feldes.

So sieht das aus:

<![if ! IE]>
<select style="width: 60px;" name="bilder_id[560]">
<option value="11877">11877: Das ist mein Titel </option>
</select>
<![endif]>
<!--[if IE]>
<select style="width: 60px;" name="bilder_id[560]" onclick="$(this).css('width','300px')" onblur="$(this).css('width','60px')">
<option value="11877">11877: Das ist mein Titel </option>
<![endif]-->
</select>

Was aber noch nerviger ist, wäre folgendes Problem:

Neben dem Dropdown ist ein weiteres Menu. Klicke ich jetzt das DD im IE an wird es ja per Javascript vergrößert, erscheint aber zuerst nicht aktiviert und nur vergrößert. Die Folge ist, dass das DD unter dem nebenliegenden Menü angezeigt wird. Erst bei erneutem Klick ist das DD im Vordergrund.

Ich habe es schon mit z-index versucht, aber hatte keinen Effekt bisher. Wie kann ich das lösen, dass entweder direkt die Auswahl aktiviert ist oder eben das Menü beim Start im Vordergrund geholt wird****?

Ich bin für jede Hilfe dankbar

P.S. F*** Internet Explorer

 

[TribunM]

Niemand eine Idee, wie man das lösen könnte?

 

[TribunM]

Wird anscheinend eine Alleinunterhaltung hier
Für alle die es interessiert die Lösung:

<select name="bilder_id[560]" style="width: 60px;" onmousedown="this.style.width='auto'" onchange="this.blur()" onblur="this.style.width='60px'">

Das ganze innerhalb des Conditional Comment funktioniert super und man merkt bis auf eine Kleinigkeit keinen Unterschied zum "normalen" Dropdown im FF.