角度选择的多选择下拉

时间:2016-08-23 09:18:19

标签: css dropdown angular-chosen

我在表单底部有一个角度选择的多选元素,并希望将其设为一个下拉框,而不是一个下拉框。 Angular-chosen似乎没有dropup选项。 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值来将元素移动到正确的位置,那么它的定位是完美的,但是在过滤列表时,找到很少或没有项目,下拉列表list相对于下拉元素的顶部缩小,在下拉列表(在父div上方)和父div的顶部之间留下间隙。

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

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

1 个答案:

答案 0 :(得分:3)

通过使用css中的calc()动态计算差异,只要父div可能会增大,就可以将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