Fix chosen dropdown from disappearing off the page at bottom

gistfile1.txt

The code is a bit verbose -- deliberately so, so that you can see what's going on.

$('#my-select').on('chosen:showing_dropdown', function(event, params) {
   var chosen_container = $( event.target ).next( '.chosen-container' );
   var dropdown = chosen_container.find( '.chosen-drop' );
   var dropdown_top = dropdown.offset().top - $(window).scrollTop();
   var dropdown_height = dropdown.height();
   var viewport_height = $(window).height();

   if ( dropdown_top + dropdown_height > viewport_height ) {
      chosen_container.addClass( 'chosen-drop-up' );
   }

});
$('#my-select').on('chosen:hiding_dropdown', function(event, params) {
   $( event.target ).next( '.chosen-container' ).removeClass( 'chosen-drop-up' );
});

I haven't posted any CSS because mine is custom so it wouldn't help anyone. But you can start with

.chosen-container.chosen-drop-up .chosen-drop{
   top: auto;
   bottom: 100%;
}

...which will put the drop-down above the input element. The rest is all about fiddling with borders and so on.