Skip to content

Let your Select2 dropdowns take advantage of the space on the page.

Notifications You must be signed in to change notification settings

panorama-ed/maximize-select2-height

Repository files navigation

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:

Select2's default behavior

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

When there is room for all options to be displayed

And intelligently shrinking where there isn't:

When there isn't room for all options to be displayed

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

When a scroll bar would obscure the dropdown

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

When the dropdown is rendered upwards

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.

With a custom bottom margin

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).

About

Let your Select2 dropdowns take advantage of the space on the page.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published