角度選択のマルチ選択ドロップ

Question

フォームの下部に角度選択された複数選択要素があり、ドロップダウンボックスではなくドロップダウンボックスにしたいと考えています。 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ドロップDIVです。

要素を正しい場所に移動するために.chosen-drop要素のCSSのトップ値を設定した場合、その位置は完全ですが、リストをフィルタリングすると、項目がほとんどまたは全く見つかりません。ドロップダウンリストは、ドロップダウン要素の最上部に移動し、ドロップダウン（親divの上）と親divの上端との間にギャップを残します。

.chosen-drop要素のCSSの下限値を親の上に移動するように設定すると、項目をフィルタリングすると下向きに縮小され、ドロップダウンと親divの間のギャップはなくなりますが、親divの高さが増加し、ドロップダウン（ドロップダウン）ボックスの必要な位置が変更されます。これは、CSS下部値が、その親divの下部を基準にして.chosen-drop divの下部を保持するためです。

.chosen-drop divの下限値を親divの上端に相対的に設定する方法はありますか？

Answer 1

あなたはあなたの親のdivをCSSで）（計算値を使用してその場で差を計算することにより、大きさに成長可能性があるたび式へのごchosen-dropの位置の下を設定することができます。

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

100％は親divの高さをどれくらい減算したいかを示し、pxはdivの下側（ピクセル単位）の上に追加したい詰め物の量を示します。単純な計算にはcalcを使うことができます。これはcss3に追加された素晴らしい機能だと思います。

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

か、単に

.chosen-drop { bottom: 100%; }

：あなたのケースでは

あなたは（div要素の完全な高さである）、あなたのchosen-drop div要素はその親の上部に右になりたいです

calc()はCSS3標準であり、旧式のブラウザと互換性がない可能性があります。 calc()hereのようなよりエキサイティングな開発について読むことができます。