DEV Community

hardyweb
hardyweb

Posted on

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

Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
keduconsultingservices profile image
KeduConsultingServices

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

Collapse
 
hardyweb profile image
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;
}

Collapse
 
keduconsultingservices profile image
KeduConsultingServices

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

Thread Thread
 
hardyweb profile image
hardyweb • Edited

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;
}
Enter fullscreen mode Exit fullscreen mode