动态选择插件下拉列表中的CSS对齐问题

Question

示例小提琴

我已经使用Chosen插件进行多选下拉菜单.

在初始页面上,dropdown已经在html视图中添加了a chosen.

然后,如果我们点击" add mitigator",新的下拉列表就会被添加.

现在这个功能是这样的:

• 每个下拉列表都有1到14个选项

• 如果我从下拉列表1中选择一个选项(比如2),则其他两个下拉列表将从其选项菜单中取消选择(禁用).

问题围绕着div下拉列表所在的CSS问题.

产生问题:

• 访问小提琴链接.

• 单击" add mitigator"链接以添加两个下拉列表.

• 在dropdown 2,逐个选择所有选项,您将看到dropdown2扩展和隐藏在后面dropdown3.但它不会发生dropdown1.

我该如何解决这个问题？

Answer 1

尝试遵循CSS

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

新添加的多选下拉菜单有一个带有类名的 div，它通过 JavaScript.chosen-container将应用高度应用到元素样式中。30px

您需要从 css 文件中覆盖该 CSS 属性。

我已经更新了你的小提琴： https: //jsfiddle.net/vrwzckav/4/