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

input group (select 2 + input box) #54

Closed wselen closed 2 years ago

wselen commented 2 years ago

With select2-bootstrap-3 I managed to get a select2box together with an input box in a table using

form-inline -> -> input-group select2-bootstrap-append (custom set to width 100%) -> select2 -> input-group-btn -> input (custom set to width 100%)

Image: left (select2) keeps its size, and right(input) goes to 100% when resizing image

Now I'm trying to do the same with select2-bootstrap-5, but I can't have it fixed because the arrow svg image is floating on top. So both select2 and input are having width 100%, and unable to set the select2 to width 1px due the image.

form-inline -> input-group ->select2 -> input

Image: left(select2) goes to 100% wich I don't want to happen. image

Any Idea how to fix this. The only way I'm thinking to have the arrow class back from bootstrap 3 but there might be a better way.

wselen commented 2 years ago

fix using:

/ select 2 input-group (use select2-inline custom class with input-box) / .input-group.select2-inline .select2-container { flex-grow: 0; } .input-group > .select2-container { flex-basis: fit-content; z-index: 3; } .input-group .select2-container .select2-selection--single { background-position: right 0.3rem center; padding: 0.375rem 1.75rem 0.375rem 0.75rem; }

apalfrey commented 2 years ago

Seems like this is something that depends on the situation and shouldn't go in the theme. Glad you found your solution though!