Breite von ausgeklappter Select Box

[max]

Hallo,

ich möchte eine SelectBox definieren, die eine feste Breite hat, wo allerdings man Sie ausklappt, trotzdem die Breite so groß ist wie das letzte Wort.

Das Beispiel:

<select name="select" style="width:100px;">  
<option selected>Bitte w&auml;hlen</option>  
<option value="12345">12345</option>  
<option value="12345678901234567890">12345678901234567890</option>  
</select>

funktioniert im IE 8 nicht wie von mir gewünscht.

Der lange Wert "12345678901234567890" wird im ausgeklappten Zustand abgeschnitten.

Ist es technische überhaupt möglich, die Breite zu definieren aber im ausgeklappten Zustand den kompletten Text anzuzeigen?

Gruss
m

[EKKi]

Mahlzeit max,

<select name="select" style="width:100px;">

Versuch mal eine Angabe für "http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width@title=min-width" ...

MfG,
EKKi

[max]

Hallo,

min-width: verbreitert dann das Element, aber nicht so wie gewünscht.
Eigentlich ist es ein IE problem da es z.B. in FF funktioniert.

Gibt es da keine Lösung?

Gruß
mx

[Gunther]

Hallo!

ich möchte eine SelectBox definieren, die eine feste Breite hat, wo allerdings man Sie ausklappt, trotzdem die Breite so groß ist wie das letzte Wort.

Ist es technische überhaupt möglich, die Breite zu definieren aber im ausgeklappten Zustand den kompletten Text anzuzeigen?

Nein, das ist imho nicht möglich. Entweder keine Breite angeben, dann richtet sich die Breite der gesamten Select-Box nach dem (breitesten) Inhalt, oder eine Breite angeben, womit die "automatische" Breitenanpassung dann allerdings nicht mehr gegeben ist.

Für deinen Wunsch müsste es eine Möglichkeit geben, für die zwei unterschiedlichen Zustände (zu/ aufgeklappt) auch unterschiedliche Eigenschaften zu definieren. Das ist jedoch nicht möglich, weil dazu in CSS nichts existiert.

Gruß Gunther

[Gunther]

Hallo nochmal!

Für deinen Wunsch müsste es eine Möglichkeit geben, für die zwei unterschiedlichen Zustände (zu/ aufgeklappt) auch unterschiedliche Eigenschaften zu definieren. Das ist jedoch nicht möglich, weil dazu in CSS nichts existiert.

Eventuell kannst du aber mit den http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Pseudoklassen (insb. :focus) etwas "basteln". Wobei das imho nur zu einem "Geruckel" auf der Seite führt, wenn die Box dann ständig ihre Breite ändert.

Ansonsten hilft ggf. auch eine JS basierte Lösung weiter.

Gruß Gunther

[Gernot Back]

Hallo Gunther,

Ansonsten hilft ggf. auch eine JS basierte Lösung weiter.

Nach meiner Erfahrung ist das die einzige Lösung. Ich habe mir vor einigen Jahren mal eine solche Lösung gebaut, bei der alle SELECT-Elemente, die in ein SPAN-Element der Klasse "breakOutOpt" geschachtelt sind, eine feste Breite haben können, diese aufgeben wenn man auf sie aufklickt (damit längere OPTIONS-Elemente dann im IE nicht abgeschnitten werden) und diese feste Breite sofort wieder annehmen, sobald man eine Option gewechselt hat oder das SELECT-Element den Focus wieder verliert.

CSS:

.breakOutOpt select {  
  width:200px;  
}

JS:

  
function initBreakoutOptions () {  
  if((!window.opera && window.event)||(navigator.userAgent.indexOf('KHTML')>0)) {  
    var mySpans = document.getElementsByTagName('SPAN');  
    for (i=0; i< mySpans.length; i++) {  
      if(mySpans[i].className == 'breakOutOpt') {  
        mySpans[i].style.position = 'relative';  
        mySelect = mySpans[i].getElementsByTagName('SELECT')[0];  
        mySelect.style.position = 'absolute';  
        mySelect.onmousedown = function () {			  
          this.style.width = 'auto';  
        }  
        mySelect.onblur = function () {  
          this.style.width = '';  
        }  
        mySelect.onchange = function () {  
          this.style.width = '';  
        }		  
      }  
    }  
  }  
}  

Diese Initialisierungsfunktion kann im OnLoad-Event des Dokuments aufgerufen werden oder auch früher, sobald der DOM-Baum vollständig eingelesen ist.

Gruß Gernot

[Gunther]

Hallo Gernot!

Ansonsten hilft ggf. auch eine JS basierte Lösung weiter.

Nach meiner Erfahrung ist das die einzige Lösung. Ich habe mir vor einigen Jahren mal eine solche Lösung gebaut, bei der alle SELECT-Elemente, die in ein SPAN-Element der Klasse "breakOutOpt" geschachtelt sind, eine feste Breite haben können, diese aufgeben wenn man auf sie aufklickt (damit längere OPTIONS-Elemente dann im IE nicht abgeschnitten werden) und diese feste Breite sofort wieder annehmen, sobald man eine Option gewechselt hat oder das SELECT-Element den Focus wieder verliert.

Ja, so in etwa hatte ich mir das auch vorgestellt.
Und wenn es sich dabei ja nur um ein IE spezifisches Problem handelt, könnte man daraus ja ggf. auch ein Behaviour (.htc) machen, sodass es nur die IEs "verabreicht" bekommen.

Aber ich verlasse "bekanntes Terrain" - nicht meine Baustelle.
Ich habe mich auch größtenteils damit abgefunden, dass sich manche Dinge (noch) nicht imho optimal lösen/ umsetzen lassen, und dass man fast immer Kompromisse eingehen muss, bzw. den "goldenen Mittelweg" finden muss. Denn bei manchen Dingen steht der Aufwand in keinem Verhältnis zum Nutzen (und ich bin fast geneigt, das Problem/ Anliegen des OPs als solches zu sehen).

Trotzdem ist es natürlich immer interessant zu sehen, ob und wie sich manche Sachen überhaupt lösen lassen. Insofern also besten Dank, dass du deine Lösung mit uns teilst! :-)

BTW: Vermutlich/ wahrscheinlich gibt es dazu auch für die großen JS-Frameworks irgendwelche "fertigen" Lösungen (hab' ich aber jetzt nicht weiter recherchiert).

Gruß Gunther

[Gernot Back]

Hallo Gunther,

Ja, so in etwa hatte ich mir das auch vorgestellt.
Und wenn es sich dabei ja nur um ein IE spezifisches Problem handelt, könnte man daraus ja ggf. auch ein Behaviour (.htc) machen, sodass es nur die IEs "verabreicht" bekommen.

Das ist keine gute Idee, es über CSS-JS-Behaviours zu machen, denn im IE_8 werden OPTIONS-Elemente bei in der Weite über CSS festgesetzten SELECT-Elementen auch noch immer abgeschnitten.

BTW: Vermutlich/ wahrscheinlich gibt es dazu auch für die großen JS-Frameworks irgendwelche "fertigen" Lösungen (hab' ich aber jetzt nicht weiter recherchiert).

Ich bezweifele, dass es da was gibt: Eine Lösung ist freilich, Dropdowns über solche Frameworks komplett nachzubauen. Da gibt es auch Fertiglösungen. Solche mit anderen Elementen nachgebauten Dropdowns werden ja in letzter Zeit von kommerziellen Seiten häufig verwendet.

Die sind zwar super-stylisch, werfen teiltransparente Schatten und haben runde Ecken, reichen aber nie an die Funktionalität des Originals (SELECT-Element) heran, das je nach vorhandenem Platz mal nach unten, mal nach oben oder sogar aus einem Browser-Fenster herausklappen kann.

Ihr Alleinstellungsmerkmal haben gefakete Dropdowns aufgrund des inflationären Gebrauchs zwar längst verloren, aber dennoch ist es mein täglich Brot, mich mit solchen Designerfürzen herumzuschlagen.

Manchmal sehne ich mich nach meinem alten Job als DaF-Lehrer zurück. Da hatte ich zwar ein unregelmäßiges, ebenso schlechtes Einkommen, die Arbeit hatte aber wenigstens einen Sinn!

Gruß Gernot