Open mahlenko opened 3 years ago
Apologies for the delay. This is fantastic! It's something that was in my backlog of things to add/change.
If you like, feel free to create a pull request completing this. If not, let me know and I'll get it implemented for you!
@apalfrey
Selects with size and multiple are not supported.
https://getbootstrap.com/docs/5.0/forms/floating-labels/#selects
.form-floating { .select2-container--bootstrap-5 { .select2-selection { height: $form-floating-height; padding: $form-floating-padding-y $form-floating-padding-x; > .select2-selection__rendered { margin-top: .6rem; margin-left: .25rem; } } } }
Here's how compiled CSS looks like:
.form-floating .select2-container--bootstrap-5 .select2-selection {
height: calc(3.5rem + 2px);
padding: 1rem 0.75rem;
}
.form-floating .select2-container--bootstrap-5 .select2-selection>.select2-selection__rendered {
margin-top: 0.6rem;
margin-left: 0.25rem;
}
I've added this to my project and it works like charm.
.form-floating { .select2-container--bootstrap-5 { .select2-selection { height: $form-floating-height; padding: $form-floating-padding-y $form-floating-padding-x; > .select2-selection__rendered { margin-top: .6rem; margin-left: .25rem; } } } }
For multiselect to work properly instead height:
$form-floating-height;use
min-height: $form-floating-height;`
with bootstrap 5.2, for me this was not enought. The label remain covered, so I added
.floating-select-label { z-index: 1000; }
Not sure about side-effect with modal.
I changed also font-size for make equals to font-size used in bootstap 5 floating select:
.form-floating {
.select2-container--bootstrap-5 {
.select2-selection {
height: $form-floating-height;
padding: $form-floating-padding-y $form-floating-padding-x;
> .select2-selection__rendered {
margin-top: .6rem;
margin-left: .25rem;
@include font-size($form-select-font-size) ;
}
}
}
}
Awesome! I was looking for this <3
Hi, In my project I use" floating labels " from bootstrap. Current styles don't support select with it, maybe not necessary :) but I selected select2 and your add-on just so as not to rewrite all the styles for bootstrap on my own. You can add my styles, maybe not quite what you need, but I had enough of these styles.
https://getbootstrap.com/docs/5.0/forms/floating-labels/