Jquery select2 css height problem fixed

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;
}

Comments

[KeduConsultingServices]

It's did nothing. My Select2 picker remains the same height. Doesn't match Bootstrap theme at all.

[hardyweb]

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;
}

[KeduConsultingServices]

In the CSS file associated with my partial class. I used the Dev tools to make sure that the CSS was loaded correctly.

[hardyweb]

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;
}