Skip to content

Instantly share code, notes, and snippets.

@Bodge-IT
Created April 9, 2018 15:08
Show Gist options
  • Save Bodge-IT/f6a52adaa392e45c25a6efe55c6e0a23 to your computer and use it in GitHub Desktop.
Save Bodge-IT/f6a52adaa392e45c25a6efe55c6e0a23 to your computer and use it in GitHub Desktop.
Fix chosen dropdown from disappearing off the page at bottom
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment