Dropdown at the bottom of the page breaks layout (Choosen Plugin)

Choosen Plugin:

Add this to the CSS file:

.chosen-container-active.chosen-with-dropup .chosen-single{

  -moz-border-radius-topright: 0 !important;

  border-top-right-radius: 0 !important;

  -moz-border-radius-topleft: 0 !important;

  border-top-left-radius: 0 !important;

}

.chosen-dropup {

  top: auto !important;

  bottom: 23px;

  border: solid #aaa;

  border-width: 1px 1px 0 1px;

  margin-top: -1px;

  border-radius: 4px 4px 0px 0px !important;

}

Then modify the JS file:

Find Chosen.prototype.results_hide = function() then add this:

this.container.removeClass("chosen-with-drop");

//Added by Fenistil

this.container.removeClass("chosen-with-dropup");

//End

this.form_field_jq.trigger("chosen:hiding_dropdown", {

Find Chosen.prototype.close_field = function() then add this:

this.container.removeClass("chosen-container-active");

//Added by Fenistil

this.container.removeClass("chosen-with-dropup");

//End

this.clear_backstroke();

Find Chosen.prototype.activate_field = function() then add this:

this.container.addClass("chosen-container-active");

//Added by Fenistil

var windowHeight = $(window).height() + $('html').scrollTop(),

  totalHeight  = this.dropdown.height() + Math.ceil(this.dropdown.offset().top);

if (totalHeight > windowHeight) {

  this.container.addClass("chosen-with-dropup");

  this.dropdown.addClass('chosen-dropup');

}

//End

this.active_field = true;

Find Chosen.prototype.results_show = function() then add this:

this.container.addClass("chosen-with-drop");

//Added by Fenistil

var windowHeight = $(window).height() + $('html').scrollTop(),

      totalHeight  = this.dropdown.height() + Math.ceil(this.dropdown.offset().top);

if (totalHeight > windowHeight) {

  this.container.addClass("chosen-with-dropup");

  this.dropdown.addClass('chosen-dropup');

}

//End

this.results_showing = true;

this.search_field.focus();

Greetings!

PS.: Thanks to Fenistil & coreyworrell, this is based on his code.