Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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 = $( ).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) {
$( ).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