Keeping select2 element a fixed size with scrolling?

Question

Here is a fiddle for example.

What this example shows is with a normal multiple-select select2 element as the user selects items from the list it will expand down and cause the parent container to expand down. I can't have the parent grow any larger than it is set due to mobile and layout concerns.

How does one set an option to disable expansion of the element or at the very least set the CSS to keep the size of the element and allow the user to scroll?

Code below to prevent linkrot.

HTML:

<form>
  <select class="select-select2" multiple="multiple" data-placeholder="Please choose one or more" data-allow-clear="true" data-close-on-select="false">
    <option>Lorem</option>
    <option>ipsum</option>
    <option>dolor</option>
    <option>sit amet</option>
    <option>consectetur</option>
    <option>adipisicing</option>
    <option>elit sed</option>
    <option>do eiusmod</option>
    <option>tempor</option>
    <option>incididunt</option>
    <option>ut labore</option>
    <option>et dolore</option>
    <option>magna aliqua</option>
    <option>Ut enim ad</option>
  </select>

  <button type="submit">Submit</button>
</form>

js:

$(".select-select2").select2();

Arundinaceous

Answer 1

http://jsfiddle.net/8svf11yh/1/

.select2-container .select2-selection {
    height: 60px;
    overflow: scroll;
} 

Or overflow:auto; may be a better choice

Crellen

Perfect *I thought I added this comment hours ago and didn't notice it was telling me I needed more characters. Thanks. – Arundinaceous

its is working.. but if you make it like " overlow: auto ", it looks more beautiful and genuine. no scroll bar shows but works like scroll bar area. – Hermes

How do I make it to take all the space to the bottom of the page and only then become scrollable? – Subsistent

Answer 2

A few refinements to @smcd's version:

.select2-selection--multiple { max-height: 10rem; overflow: auto }

I am using max-height so that it can be smaller if only a few options are selected. Only once it reaches that height does it grow no bigger. As suggested overflow: auto is great as it only uses the scrollbar if needed. Finally I target the --multiple variant of the selector so only selections with multiple options get this styling.

Vignette

Answer 3

This'll work with the latest select2 plugin:

.select2-results__options {
    height: 60px;
    overflow-y: auto;
}

Pindaric

Answer 4

go to select2.min.css then apply these changes:

.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
width: 100% !important;
vertical-align: middle}

to

.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle}

Hedonic

Answer 5

In select2 you can add classes to specific sections to change the way it looks.

This is handy if you only want to apply it to a specific element rather than all of them.

 $(".select2-my-special-select").select2({
     containerCssClass: "my-select2-container-class",
     dropdownCssClass: "test"
 });

Then you can simply use an example like above, but not for all.

.my-select2-container-class {
    height: 60px;
    overflow-y: scroll;
} 

Shrove

Answer 6

Please try the below solution

selection--multiple .select2-selection__rendered {
        display: inline-block;
        overflow: hidden;
            overflow-y: hidden;
        padding-left: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-height: 100px;
        overflow-y: auto;
    }

Olwen