Expand height to be as tall as possible

[philfreo]

Feature request:

By default (or with an option), allow the faux dropdown to have its options fill then entire height of the viewport rather than just a fixed height.

This is one of the best features of native/built in dropdowns (at least on the Mac): they require less scrolling to see the whole list since they use the entire screen height by default (when the list is long).
Using the entire screen height isn't possible in JavaScript, but even just using the entire viewport (or height of a specific container) would be a huge UX win.

[wwilsman]

We believe any styling should be done by the CSS. This ensures you will not have to add !important declarations if anybody should need the height to be any different. (I'm opposed to adding an option because it deals more with styling rather than the functionality).

However, since Dropkick strives to be very versatile, I will provide you with a foundation to achieve what it is you're trying to accomplish.

new Dropkick(HTMLSelectElement, {
  open: function () {
    var dk = this.data.elem,
      dkOptsList = dk.lastChild,
      dropUp = dk.classList.contains("dk-select-open-up"),
      spaceAbove = dk.getBoundingClientRect().top + window.pageYOffset 
        - document.documentElement.clientTop - window.scrollY,
      spaceBelow = window.innerHeight - ( spaceAbove + dk.offsetHeight );

    // set the max height to the height of the combined options
    // get this value however you please (there is a more reliable way)
    dkOptsList.style.maxHeight = dkOptsList.scrollHeight + "px";

    // subtract 20 to provide a buffer between the edge of the window
    dkOptsList.style.height = ( dropUp ? spaceAbove : spaceBelow ) - 20 + "px";
 }

});

In the CSS you'll need to set a height on .dk-select-options. Since the JS above will override the CSS, it will act as a threshold when the internal function is determining which direction it will open.

Also, you might want to reset the height and max-height to be blank in the close function.

Example using jQuery:

$(HTMLSelectElement).dropkick({
  open: function () {
    var $dk = $(this.data.elem),
      $dkOptsList = $(".dk-select-options", $dk),
      dropUp = $dk.hasClass("dk-select-open-up"),
      spaceAbove = $dk.offset().top - window.scrollY,
      spaceBelow = window.innerHeight - ( spaceAbove + $dk.outerHeight() );

    $dkOptsList.css({
      "max-height": $dkOptsList[0].scrollHeight + "px",
      "height": ( dropUp ? spaceAbove : spaceBelow ) - 20 + "px"
    });
  }
});

[wwilsman]

If we receive more requests to add an option to do this, or if we later decide so, we will make the addition.