CODEWITHSUNDEEP
jquery
f p
f p

Reputation: 3223

select2: control how many options to show

I have a select box that shows about 7 options. How can I make select2 show more options?

<td class="span4"><select id="tec" class="span4"><option></option>
    <option>A1</option><option>A2</option><option>C1</option>
    <option>C2</option><option>C3</option><option>E1</option>
    <option>E2</option><option>G1</option><option>G2</option>
    </select>
</td>

It's about showing more choices, not about selecting

Upvotes: 12

Views: 16850

Answers (5)

Arun Prasad E S
Arun Prasad E S

Reputation: 10135

All select2 containers can be set the same height.

I just added this style, it's working for me

.select2-container--default .select2-results > .select2-results__options {
    max-height: 400px;
}

Upvotes: 3

OMemisoglu
OMemisoglu

Reputation: 31

If you have multiple Select2 elements in your page, you might want to have different maximum item limitations per Select2 element.

I wrote a Less.js implementation where you can generate how many items you want to list as css classes

Note: You should check out the font for the base height of an item in the dropdown menu. In this example 36px is used as the heigth of one item in the dropdown list.

.generate-s2-maxheight(@n:6, @base-height:36px, @i:1) when (@i < @n) {
    
    .select2-container--default .s2-mh-@{i} .select2-results>.select2-results__options 
    {
        max-height: (@base-height * @i) !important;
    }

    // Iterate to the next css generation until it reaches to @n
    .generate-s2-maxheight(@n, @base-height, (@i+1));
}
    
// Generation of css classes for item limitation from 1 to 9 items (10 is excluded)
//
.generate-s2-maxheight(10);

Example CSS to show 5 items in dropdown:

    .select2-container--default .s2-mh-5 .select2-results>.select2-results__options {
        max-height: 180px !important;
    }

As result you can use the configuration dropdownCssClass to pass the css class

 $("<SELECT2_CLASS_OR_ID>").select2({
     dropdownCssClass: "s2-mh-<NUM_OF_ITEMS_TO_SHOW>"
 });

Example:

 $(".select2").select2({
     dropdownCssClass: "s2-mh-5"
 });
`

Upvotes: 0

JacobEvelyn
JacobEvelyn

Reputation: 3971

If you're looking to just display more options than the default without it looking bad, I just wrote a jQuery plugin (maximize-select2-height) to do exactly this. See the screenshots on the GitHub page (linked) to see how it behaves under different page layout circumstances.

Hope that's helpful to someone!

Upvotes: 4

f p
f p

Reputation: 3223

This worked:

html:

<select class="bigdrop">

jquery:

$(".bigdrop .select2-results").css("max-height","400px");

Upvotes: 6

Tomas Santos
Tomas Santos

Reputation: 550

Try adding multiple and size attribute 

<td class="span4">
    <select id="tec" class="span4" size="10" multiple="multiple">
       <option></option>
       <option>A1</option><option>A2</option><option>C1</option>
       <option>C2</option><option>C3</option><option>E1</option>
      <option>E2</option><option>G1</option><option>G2</option>
    </select>
</td>

Upvotes: -1

Related Questions