Skip to content

Instantly share code, notes, and snippets.

@alfredobarron
Created August 19, 2015 21:55
Show Gist options
  • Save alfredobarron/24570de1cd123c7e518c to your computer and use it in GitHub Desktop.
Save alfredobarron/24570de1cd123c7e518c to your computer and use it in GitHub Desktop.
Height select 2 in bootstrap 3.3.4
/**
* Change three lines
*
/* line 11 */
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 34px;
user-select: none;
-webkit-user-select: none; }
/* line 131 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 32px; }
/* line 139 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 32px;
position: absolute;
top: 1px;
right: 1px;
width: 20px; }
@vingorius
Copy link

Thks @ryanpcmcquen, and add below css to move down arrow

.select2-selection__arrow {
    height: 34px !important;
}

@ahmed-habbachi
Copy link

super cool and lovely especially when add @vingorius to @ryanpcmcquen solution thanks to you both

@Calvin-2DWeb
Copy link

But what if I need to create more than one select2 element, and I want each of then with different heigth sizes?
It would be great to have the opportunity to choose the heigth, specially if I'm creating an dynamical element with select2

@souravsingh-blr
Copy link

@ryanpcmcquen @vingorius combining both solutions, it works smoothly..thanks

@adnanzaheer
Copy link

I find that this works reasonably well (in your own stylesheet):

/* Make Select2 boxes match Bootstrap3 heights: */
.select2-selection__rendered {
  line-height: 32px !important;
}

.select2-selection {
  height: 34px !important;
}

@ryanpcmcquen thanks allot
It's working perfect

@DSBRBrasil
Copy link

It's working perfect
Thank you so much from Brazil

@alfredobarron
Copy link
Author

alfredobarron commented Oct 14, 2019 via email

@adnanzaheer
Copy link

it's still working fine in Bootstrap 4.
Thanks Once again

@Cjleto
Copy link

Cjleto commented May 11, 2020

Good solution

@artarya
Copy link

artarya commented Jan 17, 2021

thats greate

@Jomimorillo
Copy link

Worked like charm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment