角度選擇多選下拉

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。