Angular-chosen multi-select drop up

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. Angular-chosen does not seem to have a dropup option. The html produced by the select element is as follows:

    <select multiple chosen>
    <div class="chosen-container chosen-container-multi">
       <ul class="chosen-choices">
       ...
       </ul>
       <div class="chosen-drop">
       ...
       </div>
    </div>

It's the .chosen-drop div that I want moved up.

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.

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.

Is there some way to set the .chosen-drop div's bottom value relative to the top of its parent div?

Solution

You can set the bottom of your chosen-drop's position to a formula whenever your parent div might grow in size by calculating the difference on the fly using calc() in css:

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

The 100% indicates how much of the parent div's height you want to subtract from, and px is the amount of padding you want to add above the "bottom" of your div (in pixels). You can use calc for simple calculations which I think is a nifty feature added to css3.

In your case you want your chosen-drop div to be right at the top of it's parent, (which is the full height of the div):

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

or just

.chosen-drop { bottom: 100%; }

I should mention though that calc() is a CSS3 standard and will probably not be compatible with older browsers. You can read up on more exciting developments like calc() here.