maximize-select2-height

This package is short and simple. It magically expands your Select2 dropdowns to fill the height of the window.

It factors in the number of elements in the dropdown, the position of the Select2 on the page, the size and scroll position of the page, the visibility of scroll bars, and whether the dropdown is rendered upwards or downwards. And it resizes itself each time the dropdown is opened. And minified, it's ~800 bytes (including comments)!

(Note that this plugin is built for Select2 v4.x.x only.)

Installation

npm install maximize-select2-height

Or download it directly from npm.

Or clone this repository.

Or copy-paste the minimize-select2-height.js or minimize-select2-height.min.js file into your project directly.

Usage

Anywhere you initialize a Select2 dropdown like so:

$("#my-dropdown").select2();

Simply chain the magic method on:

$("#my-dropdown").select2().maximizeSelect2Height();

And your dropdowns will go from being an arbitrary hardcoded height:

To showing all options when there is room in the window for all of them:

And intelligently shrinking where there isn't:

The height is adjusted slightly when a horizontal scroll bar is present, to prevent the scroll bar from obscuring the dropdown:

And the height automatically adjusts when Select2 decides to render a dropdown upwards instead of downwards:

Advanced Usage

You can adjust how much extra space is left between the edge of the open dropdown and the edge of the viewport with the cushion option:

$("#my-dropdown").select2().maximizeSelect2Height({
  cushion: 50 // Must be a numerical pixel value.
});

Note that when a cushion is passed, the code will not adjust spacing for the presence of a horizontal scroll bar, to allow for maximum control.

Note

This plugin requires a unique ID on the <select></select> DOM element to work (though you don't have to select by ID with jQuery when you initialize this).