select2/select2-bootstrap-theme

optgroup wrong font style

michele-b opened this issue · 3 comments

font-size is wrong, and maybe color also...simply remove it from select2-results__group style

.select2-container--bootstrap .select2-results__group {
    /*color: #777;*/
    display: block;
    padding: 6px 12px;
    /*font-size: 12px;*/
    line-height: 1.428571429;
    white-space: nowrap;
}
NaWer commented

And padding too : 6 4 seems okay.

fk commented

Hey @michele-b and @NaWer!

If you take a look at the Sass (or Less) sources for .select2-results__group and compare them to the style definitions for Bootstraps "Dropdown header", you will find that we mimick the latter in terms of font-size, line-height and color (while the padding is based on Bootstraps definitions for .form-control and we do not alter the browser default styles of the <strong> tag the class is applied to).
The Bootstrap documentation describes the purpose of the "Dropdown header" as "to label sections of actions in any dropdown menu" – which is very close to the job that .select2-results__group is doing.

If you need to change the styles for .select2-results__group, just add some custom CSS, e. g.

.select2-container--bootstrap .select2-results__group {
    color: inherit;
    font-size: inherit;
    padding: 6px 4px;
}

For those who do compile their own select2-bootstrap-theme from the Sass or Less source, the next theme update will introduce a bunch of variables enabling you to change the properties in question.

fk commented

As announced, 0.1.0-beta.9 provides dedicated variables.