Add more item in my select

How Do I...
#1

Hello

How to add more item in my select ? i don’t find the option to configure this.

Thanks

#2

Can you explain what you mean by “add more items”?

How are you populating your Select2? Are you initializing it from a hard-coded <select>, or are you using a JavaScript array, or are you using AJAX?

#3

I initialize select2 like this:

$(function() {
	$(".selectpicker").select2();
});

in a script.js, and then via a standard , but I’d like to increase the number of I see in the select.

#4

OK, I understand what you want. While there is no configuration option to indicate how many items you want to display in the dropdown, or how tall you want the dropdown, I have discovered the CSS rule that controls it:

.select2-container--classic .select2-results>.select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

So to change the height of the dropdown you just need to set your own max-height rule for that selector. The easiest way to do this would be to create your own CSS rule like the following:

.select2-container--classic .select2-results>.select2-results__options {
  max-height: 300px !important;
}
Pick whatever size works for your application.

Good luck with your project!
#5

Yes sorry but don’t work, i have try many solutions but i need the one work :stuck_out_tongue:

i can change the width with data-width=“170px” but not the height :frowning:

#6

Hmm. It worked for me. I wonder whether the style rule is actually getting applied. It should, since the rule I provided should have the same priority as the default sizing rule, and the !important declaration should make my rule override the default rule.

Can you inspect the element that is the target of that rule in your browser’s Elements console and see whether the rule is being applied?

#7

yep she load in element.

i have try with :

.select2-results {
	height: 600px !important;
	max-height: 600px !important;
}

.select2-container--default .select2-results > .select2-results__options {
	height: 600px !important;
	max-height: 600px !important;
}

This work now :slight_smile:

1 Like