Problème d'alignement CSS dans les listes déroulantes dynamiques de plug-ins choisies - jquery, css, multi-select, choisi par jquery

Exemple de violon

J'ai utilisé le Choisi plugin pour les listes déroulantes multi-sélection.

Sur la page initiale, un dropdown est déjà ajouté dans html voir qui est chosen.

Alors si on clique sur le "add mitigator"de nouvelles listes déroulantes sont ajoutées.

Maintenant, la fonctionnalité est comme ceci:

• chaque liste déroulante a 1 à 14 comme options

• Si je sélectionne une option (disons 2) dans le menu déroulant 1, les deux autres listes déroulantes auront (2) désélectionnées (désactivées) de leur menu d'options.

Le problème tourne autour de la question CSS du divs où se trouvent les menus déroulants.

Pour produire le problème:

• Visitez le lien de violon.

• Clique sur le "add mitigator"lien pour ajouter deux autres listes déroulantes.

• Dans dropdown 2, sélectionnez toutes les options une par une et vous verrez la dropdown2 se prolonger et se cacher derrière le dropdown3. Mais ça n'arrive pas avec dropdown1.

Comment puis-je régler ce problème?

Réponses:

essayez de suivre CSS

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

La liste déroulante de sélection multiple nouvellement ajoutée a un div avec le nom de classe .chosen-container qui obtient la hauteur appliquée 30px dans le style d'élément à travers le JavaScript.

vous devez écraser cette propriété CSS de votre fichier css.

J'ai mis à jour votre violon :https://jsfiddle.net/vrwzckav/4/