角度选择多选下拉
我在窗体的底部有一个角度选择的多选元素,并且希望使其成为一个上拉框,而不是下拉框。 Angular-chosen似乎没有dropup选项。 通过选择元素生成的HTML如下:角度选择多选下拉
<select multiple chosen>
<div class="chosen-container chosen-container-multi">
<ul class="chosen-choices">
...
</ul>
<div class="chosen-drop">
...
</div>
</div>
这是我想移动了.chosen降格。
如果我将.chosen-drop元素的css顶部值设置为将元素移动到正确的位置,则它的定位是完美的,但是在过滤列表时,只有很少或没有找到项目,下拉列表会缩小相对到下拉元素的顶部,在下拉(父div之上)和父div顶部之间留下空隙。
如果我将.chosen-drop元素的css底部值设置为在父级上方移动,则过滤项会使其向下缩小,从而消除下拉和父级div之间的间隙,但只要有更多项目选择,父div增长高度,更改下拉(dropup)框的所需位置。这是因为CSS底部值保持.chosen-drop div的底部相对于其父div的底部。
是否有某种方法可以将.chosen-drop div的底部值相对于其父级顶部的底部值设置?
您可以chosen-drop
的底部位置设置时,您的父母DIV可能在尺寸上通过在CSS中使用计算()计算在飞行的不同成长公式:
.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。
你的答案最终变得如此简单......谢谢。我想只有一种学习方式。 – Eduard