CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-select2
o_O
o_O

Reputation: 5737

Keeping select2 element a fixed size with scrolling?

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();

Upvotes: 10

Views: 32300

Answers (6)

Sharad Tiwari
Sharad Tiwari

Reputation: 31

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;
    }

Upvotes: 0

Goddard
Goddard

Reputation: 3059

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;
}

Upvotes: 0

Marouane K
Marouane K

Reputation: 61

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}

Upvotes: 0

adamj
adamj

Reputation: 4792

This'll work with the latest select2 plugin:

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

Upvotes: 4

Eric Anderson
Eric Anderson

Reputation: 3792

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.

Upvotes: 9

smcd
smcd

Reputation: 3265

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

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

Or overflow:auto; may be a better choice

Upvotes: 24

Related Questions