maximize-select2-height

WebJar for maximize-select2-height

License	MIT
GroupId	org.webjars.npm
ArtifactId	maximize-select2-height
Last Version	1.0.3
Release Date	Jul 15, 2019
Type	jar
Description	maximize-select2-height WebJar for maximize-select2-height
Project URL	http://webjars.org
Source Code Management	https://github.com/panorama-ed/maximize-select2-height

Download maximize-select2-height

Filename	Size
maximize-select2-height-1.0.3.pom
maximize-select2-height-1.0.3.jar	7 KB
maximize-select2-height-1.0.3-sources.jar	22 bytes
maximize-select2-height-1.0.3-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/maximize-select2-height/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>maximize-select2-height</artifactId>
    <version>1.0.3</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/maximize-select2-height/
implementation 'org.webjars.npm:maximize-select2-height:1.0.3'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/maximize-select2-height/
implementation ("org.webjars.npm:maximize-select2-height:1.0.3")

Apache Buildr

'org.webjars.npm:maximize-select2-height:jar:1.0.3'

Apache Ivy

<dependency org="org.webjars.npm" name="maximize-select2-height" rev="1.0.3">
  <artifact name="maximize-select2-height" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='maximize-select2-height', version='1.0.3')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "maximize-select2-height" % "1.0.3"

Leiningen

[org.webjars.npm/maximize-select2-height "1.0.3"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : select2	jar	[4.0.0,5)

Project Modules

There are no modules declared in this project.

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

Panorama Education

Versions

Version
1.0.3 Jul 15, 2019
1.0.0 Apr 19, 2018