CSS-Alignment-Problem in dynamischen Dropdown-Listen für ausgewählte Plugins - jquery, css, multi-select, jquery-selected

Beispiel Geige

Ich habe das benutzt Gewählt Plugin für die Multiselect-Dropdowns.

Auf der ersten Seite a dropdown ist bereits hinzugefügt html sehen was ist chosen.

Dann, wenn wir auf den "add mitigator"Neue Dropdowns werden hinzugefügt.

Jetzt ist das Feature so:

• jedes Dropdown hat 1 bis 14 als Optionen

• Wenn ich eine Option (sagen wir 2) aus dem Dropdown 1 wähle, dann haben die anderen zwei Dropdowns (2) in ihrem Optionsmenü deaktiviert (deaktiviert).

Das Thema dreht sich um die CSS - Ausgabe des divs wo sich die Dropdowns befinden.

Um das Problem zu erzeugen:

• Besuche den Geigen-Link.

• Klicken Sie auf "add mitigator"Link, um zwei weitere Dropdowns hinzuzufügen.

• Im dropdown 2, wählen Sie nacheinander alle Optionen aus, und Sie sehen die dropdown2 sich ausdehnen und hinter dem verstecken dropdown3. Aber es passiert nicht mit dropdown1.

Wie kann ich dieses Problem lösen?

Antworten:

Versuchen Sie es mit CSS

.chosen-container {
min-height:30px;
height:auto !important;
}

Das neu hinzugefügte Dropdown-Menü für mehrere Auswahlfelder enthält ein div mit Klassennamen .chosen-container welches wird angewandte Höhe 30px durch JavaScript in Element-Stil.

Sie müssen diese CSS-Eigenschaft aus Ihrer CSS-Datei überschreiben.

Ich habe deine Geige aktualisiert :https://jsfiddle.net/vrwzckav/4/