角度选择多选下拉

Question

我在窗体的底部有一个角度选择的多选元素，并且希望使其成为一个上拉框，而不是下拉框。 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的底部值相对于其父级顶部的底部值设置？

Answer 1

您可以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。