1

我在表单底部有一个角度选择的多选元素，并希望将其设为下拉框，而不是下拉框。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 的顶部？

4

1 回答 1

3

chosen-drop您可以通过使用 css 中的 calc() 即时计算差异，将您的位置的底部设置为公式，只要您的父 div 可能会增大大小：

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

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

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

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

要不就

.chosen-drop { bottom: 100%; }

我应该提一下，虽然这calc()是一个CSS3标准，并且可能与旧版浏览器不兼容。您可以在calc() 此处阅读更多令人兴奋的发展。

于 2016-08-23T09:56:34.413 回答