CSS alignment issue in dynamic Chosen plugin dropdowns

Question

Example Fiddle

I have used the Chosen plugin for the multiselect dropdowns.

On initial page, a dropdown is already added in html view which is chosen.

Then if we click on the "add mitigator" new dropdowns are getting added.

Now the feature is like this:

• each dropdown has 1 to 14 as options

• If I select an option (say 2) from dropdown 1, then the other two dropdowns will have (2) deselected (disabled) from their option menu.

The issue revolves around the CSS issue of the divs where the dropdowns reside.

To produce the issue:

• Visit the fiddle link.

• Click on the "add mitigator" link to add two more dropdowns.

• In dropdown 2, select all the options one by one, and you will see the dropdown2 getting extended and hiding behind the dropdown3. But it does not happen with dropdown1.

How can I sort out this issue?

Answer 1

try following CSS

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

The newly added multiple select drop-down have a div with classname .chosen-container which is getting applied height 30px into element style through the JavaScript.

you need to overwrite that CSS property from your css file.

I have updated your fiddle :https://jsfiddle.net/vrwzckav/4/