About: Highly motivated and self-directed IT professional with a strong foundation in web development (particularly Laravel) and a passion for continuous learning.
insert this code
.select2-selection__rendered {
line-height: 35px !important;
}
.select2-container .select2-selection--single {
height: 37px !important;
width: 100% !important;
}
.select2-selection__arrow {
height: 37px !important;
}
where did you put this code .select2-selection_rendered {
line-height: 35px !important;
}
.select2-container .select2-selection--single {
height: 37px !important;
width: 100% !important;
}
.select2-selection_arrow {
height: 37px !important;
}
In the CSS file associated with my partial class. I used the Dev tools to make sure that the CSS was loaded correctly.
put in custom.css , this custom.css below select2.min.css
/* Overwrite container height and width */
.select2-container .select2-selection--single {
height: 37px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
}
/* Text inside select box */
.select2-container .select2-selection--single .select2-selection__rendered {
line-height: 35px !important;
padding-left: 10px !important;
}
/* Dropdown arrow */
.select2-container .select2-selection--single .select2-selection__arrow {
height: 37px !important;
top: 0 !important;
}
It's did nothing. My Select2 picker remains the same height. Doesn't match Bootstrap theme at all.