SCSS Floating labels

[mahlenko]

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/

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

[apalfrey]

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!

[WinterSilence]

@apalfrey

Selects with size and multiple are not supported.

https://getbootstrap.com/docs/5.0/forms/floating-labels/#selects

[Real-Gecko]

.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.

[antonKrizmanic]

.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;usemin-height: $form-floating-height;`

[b1ade68]

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