Created
August 19, 2015 21:55
-
-
Save alfredobarron/24570de1cd123c7e518c to your computer and use it in GitHub Desktop.
Height select 2 in bootstrap 3.3.4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; } |
super cool and lovely especially when add @vingorius to @ryanpcmcquen solution thanks to you both
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
@ryanpcmcquen @vingorius combining both solutions, it works smoothly..thanks
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
It's working perfect
Thank you so much from Brazil
Hello, thanks for your reply.
…On Sun, Oct 13, 2019, 8:12 PM DSBRBrasil - Tecnologia de Software < ***@***.***> wrote:
It's working perfect
Thank you so much from Brazil
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://gist.github.com/24570de1cd123c7e518c?email_source=notifications&email_token=AARYD2BVFENRSM3PRDROBBLQOPIR5A5CNFSM4IYVXXE2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAF2NN4#gistcomment-3054302>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AARYD2CU75LQE6EXMX367WDQOPIR5ANCNFSM4IYVXXEQ>
.
it's still working fine in Bootstrap 4.
Thanks Once again
Good solution
thats greate
Worked like charm
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thks @ryanpcmcquen, and add below css to move down arrow