search

apalfrey / select2-bootstrap-5-theme

A Select2 v4 theme for Bootstrap 5
https://apalfrey.github.io/select2-bootstrap-5-theme/
MIT License
212 stars 48 forks source link

select 2 in inline-block not working? #46

Closed estani closed 2 years ago

estani commented 3 years ago

I'm trying to display the select as inline-block, which should be quite standard. The select get automatically a display: block when using this theme (otherwise works fine).

Apparently this is by design: https://github.com/apalfrey/select2-bootstrap-5-theme/blob/d8e754015745fa40aff5bbfa07e0cfbc657af9ad/src/_layout.scss#L3

How can this be changed?

apalfrey commented 2 years ago

Yeah, the element is set to display: block to match how Bootstrap has designed it's select elements, see: https://github.com/twbs/bootstrap/blob/main/scss/forms/_form-select.scss#L7

I've taken a look at it seems to work just fine if you override it with:

.select2-container--bootstrap-5 {
    display: inline-block;
}

See: https://codepen.io/TGDPalf/pen/dyzZpyj

Let me know how it goes!