角度选择的多选下拉

Question

我在表单底部有一个角度选择的多选元素，我想让它成为下拉框，而不是下拉框。 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 顶部值以将元素移动到正确的位置，它的定位是完美的，但是在过滤列表时，发现很少或没有项目，下拉列表相对于下拉元素的顶部，在下拉列表（父 div 上方）和父 div 的顶部之间留有空隙。

如果我将 .chosen-drop 元素的 css 底部值设置为将其移动到父元素上方，过滤项目使其向下缩小，消除下拉列表和父 div 之间的间隙，但只要选择了更多项目, 父 div 的高度增长，改变了下拉（dropup）框所需的位置。这是因为 css 底部值保持 .chosen-drop div 的底部相对于其父 div 的底部。

有没有办法设置 .chosen-drop div 的底部值相对于其父 div 的顶部？

Answer 1

您可以通过在 css 中使用 calc() 即时计算差异，将您的 chosen-drop 的底部位置设置为一个公式：

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

100% 表示您想要减去多少父 div 的高度，而 px 是您想要在 div 的“底部”上方添加的填充量（以像素为单位）。您可以使用 calc 进行简单的计算，我认为这是添加到 css3 中的一个不错的功能。

在您的情况下，您希望您的 chosen-drop div 位于其父级的顶部，（即 div 的全高）：

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

或者只是

.chosen-drop { bottom: 100%; }

我应该提到calc() 是CSS3 标准，可能与旧版浏览器不兼容。您可以阅读更多激动人心的发展，例如 calc() here。