Angular-选多-select掉落

Question

我在表单底部有一个 angular 选择的多 select 元素，我想将其设为下拉框，而不是下拉框。 Angular-chosen 似乎没有下拉选项。 select元素产生的html如下：

    <select multiple chosen>
    <div class="chosen-container chosen-container-multi">
       <ul class="chosen-choices">
       ...
       </ul>
       <div class="chosen-drop">
       ...
       </div>
    </div>

这是我要上移的 .chosen-drop div。

如果我设置 .chosen-drop 元素的 css top 值以将元素移动到正确的位置，它的定位是完美的，但是在过滤列表时，几乎没有找到任何项目，下拉列表相对于下拉列表元素的顶部缩小，在下拉列表（在父级 div 上方）和父级 div.

的顶部之间留有间隙

如果我将 .chosen-drop 元素的底部值设置为 css 以将其移动到父元素上方，过滤项目会使其向下缩小，从而消除下拉列表与父元素之间的间隙 div，但一旦 select 编辑了更多项目，父级 div 的高度就会增加，从而更改下拉（下拉）框的所需位置。这是因为 css 底部值使 .chosen-drop div 的底部相对于其父级 div.

的底部

有什么方法可以设置 .chosen-drop div 相对于其父级 div 顶部的底部值吗？

Answer 1

只要您的 parent div 的大小可能会增长，您就可以将 chosen-drop 位置的底部设置为一个公式，方法是使用 calc() 即时计算差异在 css:

.chosen-drop { bottom: calc(100% - px); }

100% 表示要从 parent div 的高度中减去多少，px 是要在 "bottom" 上方添加的填充量您的 div（以像素为单位）。您可以使用 calc 进行简单计算，我认为这是添加到 css3.

的一个绝妙功能

在您的情况下，您希望 chosen-drop div 位于 parent 的顶部（这是 div 的完整高度）：

.chosen-drop { bottom: calc(100%); }

或者只是

.chosen-drop { bottom: 100%; }

我应该提一下 calc() 是 CSS3 standard and will probably not be compatible with older browsers. You can read up on more exciting developments like calc() here。

Angular-选多-select掉落

Angular-chosen multi-select drop up

css

angular-chosen

dropdown