Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Dynamische Dropdown-Liste

Empfohlene Antworten

Veröffentlicht

Hallo zus

ich möchte auf meiner seite eine dropdownliste einfügen, welche sich beim öffnen automatisch auf den längsten eintrag vergrössert vergrössert.

Beispiel: die grösse (breite) der liste im ungeöffneten zustand ist 200px. der längste eintrag ist aber 400px breit. beim runterklappen der liste kann nicht der ganze eintrag gelesen werden.

wie kann ich es bewerkstelligen, dass sich die grösse beim aufklappen so anpasst,dass ich den längsten eintrag lesen kann?

Gruss aus Bern

Hi,

hm, ist das nicht das Default verhalten dieser boxen?

Gruß,

Markus

nicht ganz! wenn die breite festgelegt wird (200px) ist die breite so wie sie festgelegt wurde. ich möchte nicht, dass eine liste 150px, eine zweite 180px und eine dritte 50px hat, d.h. sich der länge der einträge anpasst.

nicht ganz! wenn die breite festgelegt wird (200px) ist die breite so wie sie festgelegt wurde. ich möchte nicht, dass eine liste 150px, eine zweite 180px und eine dritte 50px hat, d.h. sich der länge der einträge anpasst.

Ich denke ich weiß was du meinst, das Problem hatte ich auch schon.

Ich habe es damit geregelt, dass ich dem Select selbst eine feste width zugeteilt habe, den einzelnen options allerding width:auto.

Damit wird der Select selbst in der gewünschten Größe dargestellt, die Options werden dann aber nach Bedarf vergrößert.

Dies funktionierte aber nur im Firefox, soweit ich weiß. Der IE hat sich dagegen geweigert.

Dies funktionierte aber nur im Firefox, soweit ich weiß. Der IE hat sich dagegen geweigert.

Jep, hab ich grad getestet,

schade! leider verwende ich ausschliesslich IE. das ist eine Vorgabe des Projektes. gibt es sonst keine möglichkeit?

schonma sowas versucht:


<select name="ab" style="width: 50px">

 <option style="width: 150px">asd</option>

</select>

?

Somit ist die länge der Optionen wahrscheinlich nicht dynamisch, aber destotrotz bereiter als die Select Box.

Ist ungetestet!

Gruß,

Markus

schonma sowas versucht:


<select name="ab" style="width: 50px">

 <option style="width: 150px">asd</option>

</select>

?

Somit ist die länge der Optionen wahrscheinlich nicht dynamisch, aber destotrotz bereiter als die Select Box.

Ist ungetestet!

Gruß,

Markus

Doch! Aber das funzt mit IE nicht. Mit Firefox geht's. Ich suche eine Lösung für IE. sie muss auch nur für IE funktionieren.

hm, du könntest evtl. beim öffnen der drop down Liste per JavaScript, die style.width angabe entfernen und beim wiederzuklappen erneut einhängen?

Gruß,

Markus

  • 1 Monat später...

Hallo zus

Ich habe mich da nochmals drum gekümmert. leider hab ich immer noch probleme. ich versuche folgendes. beim klick auf die besagte select-box kreiere ich einen neuen layer. in diesen layer fülle ich die vergrösserte selectbox.

nun habe ich das problem, dass die selectbox nicht an der richtigen position erscheint. ich möchte sie gerne ganau über der kleinen selectbox.

das zweite problem ist, dass ich möchte, dass sich die vergrösserte box automatisch beim verlassen wieder schliesst, und dass die kleine box wieder angezeigt wird. kann mir da jemand einen tip geben?

der code sieht wir folgt aus:


function selectdivOLD(id)

{

	if (!document.all.mydiv)

	{

		code = '<div id="mydiv" style="position:absolute;visibility:shown;"></div>';

		document.body.insertAdjacentHTML('beforeEnd', code);

	}

	var myselect = document.getElementById(id);

	myselect.style.width="400px";

	document.all.mydiv.style.top=window.event.clientY-10;

	document.all.mydiv.style.left=window.event.clientX-390;

	mydiv.appendChild(myselect);

}


<td><select id="test" onmousedown="selectdivOLD(this.id)" class="select">

	<option value="0"></option>

	<option value="0">abd sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf</option>

	<option value="0"></option>

	</select>

</td>

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.