title: Angular-chosen multi-select drop up
body: <p>I have an angular-chosen multi-select element at the bottom of a form and want to make it a dropup box, not a dropdown box. <a href="https://www.npmjs.com/package/angular-chosen" rel="nofollow">Angular-chosen</a> does not seem to have a dropup option.
  The html produced by the select element is as follows:</p>
  
  <pre><code>    &lt;select multiple chosen&gt;
      &lt;div class="chosen-container chosen-container-multi"&gt;
         &lt;ul class="chosen-choices"&gt;
         ...
         &lt;/ul&gt;
         &lt;div class="chosen-drop"&gt;
         ...
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>It's the .chosen-drop div that I want moved up. </p>
  
  <p>If I set the css top value of the .chosen-drop element to move the element to the correct place, it's positioning is perfect, but on filtering the list, with few or no items found, the dropdown list shrinks relative to the top of the dropdown element, leaving a gap between the dropdown (above the parent div) and the top of the parent div.</p>
  
  <p>If I set the css bottom value of the .chosen-drop element to move it above the parent, filtering items makes it shrink downwards, eliminating the gap between the dropdown and the parent div, but as soon as more items are selected, the parent div grows in height, changing the required position of the dropdown (dropup) box. This is because the css bottom value keeps the bottom of the .chosen-drop div relative to the bottom of its parent div.</p>
  
  <p>Is there some way to set the .chosen-drop div's bottom value relative to the top of its parent div? </p>