Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SCSS Floating labels #21

Open
mahlenko opened this issue Mar 27, 2021 · 6 comments
Open

SCSS Floating labels #21

mahlenko opened this issue Mar 27, 2021 · 6 comments
Labels
enhancement New feature or request

Comments

@mahlenko
Copy link

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
Copy link
Owner

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 apalfrey added the enhancement New feature or request label May 12, 2021
@WinterSilence
Copy link

@apalfrey

Selects with size and multiple are not supported.

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

@Real-Gecko
Copy link

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

@antonKrizmanic
Copy link

antonKrizmanic commented Oct 17, 2021

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

b1ade68 commented Nov 18, 2022

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

@gecexgokyuzu
Copy link

Awesome! I was looking for this <3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

7 participants