Form-Floating not working together with input-groups

[morasp]

Hi all,
I tried to use floating labels together with input-groups.
There seems to be an issue with resizing, also this is not documented on the webpage:
Where do I have to place the "form-floating" class in order to work properly?
I tried to place it directly before the input itself and this seams to work, but the input gets resized and does not fit into the grid anymore.
Has anybody a suggestion how to solve this problem?

[mdo]

Correct, there's no support for input groups, nor are we planning to add this.

[klumbe]

Why no plans to add this? It looks pretty nice together with the addons.
I do understand that it is sort of "doing things twice", as the addon might be a user-icon an the floating text might be "Username",
but still, it looks way better. Combining the user-icon with a text like "Email address" starts to make more sense, like being more precise.

[WinterSilence]

"not are we planning to add this" = "we can't do it using pure CSS i.e. we don't want add more JS in project planed as CSS framework"

[klumbe]

You can sort of fake it, but it won't give the same experience and will be harder to maintain:

<div class="input-group mb-3">
    <span class="input-group-text" id="basic-addon-1">@</span>
   <span class="form-floating">
        <input type="text" class="form-control" id="username" aria-describedby="basic-addon-1" ... />
        <label for="username">Email Address</label>
   </span>
</div>

What you get is still not perfect and requires a bit tweaking, for example setting the border-top-left-radius and border-bottom-left-radius to zero and adjusting the width. But it is already quite close to what one wants.
It would be better if it would be supported by default though.

[m-y-n-o-n-a]

hi, did you manage to combine this with error messages?

as soon as you display errors the addon is sizes to the errors at well = addon is larger than input field

[klumbe]

Hi, Haven't thought about it yet, since I haven't used it in production.
I think the usual html errors when using basic input validation are overlays dependent on the browser used,
but no expert here.

Could you give an example?
You could easily use my template from above to get the thing started:
https://jsfiddle.net/9fu4a0sk/1/

If talking about specific backend-frameworks (i.e. Rails), then this is heavily depending on how / where the framwork would output any error. Like I said: I am not big expert in HTML regards, but I may have a look and find another workaround.

[SimonItaly]

Hi, thanks for your code. I've been using it in a project without any downsides.
I still don't understand how to fix the width. I've the code inside a classic <div class="row"><div class="col-6"> and the input text is not reaching the end of the content.
Do you have any suggestion on how to do it? Again, thanks a lot.

[719media]

#34527

[m-y-n-o-n-a]

Am 17.04.2022 um 19:58 schrieb Christian Müller ***@***.***>: Hi, Haven't thought about it yet, since I haven't used it in production. I think the usual html errors when using basic input validation are overlays dependent on the browser used, but no expert here. Could you give an example? You could easily use my template from above to get the thing started: https://jsfiddle.net/9fu4a0sk/1/ <https://jsfiddle.net/9fu4a0sk/1/> If talking about specific backend-frameworks (i.e. Rails), then this is heavily depending on how / where the framwork would output any error. Like I said: I am not big expert in HTML regards, but I may have a look and find another workaround. — Reply to this email directly, view it on GitHub <#32653 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APHRR5KYS7PZMB2YUXCUKK3VFRGMNANCNFSM4VOX3MMQ>. You are receiving this because you commented.

Hi, I found out there might be some improvements in version 5.2 Just started using bootstrap. Kr, A.

[klumbe]

Hi,
that's what the link above to another change request suggests.
Nice that someone picked it up. Pretty much like the combination.
Haven't tried the results expect watching the codepen example given.

[m-y-n-o-n-a]

I am also very much looking forward to this :-) To me this is the last step to get the floating labels fully working.

…

Am 17.04.2022 um 20:11 schrieb Christian Müller ***@***.***>: Hi, that's what the link above to another change request suggests. Nice that someone picked it up. Pretty much like the combination. Haven't tried the results expect watching the codepen example given. — Reply to this email directly, view it on GitHub <#32653 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APHRR5JUQQQ7ZRRNK5CZJJTVFRH3VANCNFSM4VOX3MMQ>. You are receiving this because you commented.

[crustamet]

I support the suggestion to add this by default. Form floating was just added in bootstrap 5, and now in 5.2 should be fixed by now.

The only problem is that you can expand the html, so there are a lot of possible cases maybe put a button maybe a card with an image etc..

Surely you can add an icon at the beginning of the input and at the end something like this, and surely this can be made by default when form-floating exists in a input-group

[simondrabble]

This does not seem to be fixed (entirely) in 5.2.0. Fiddle here: https://jsfiddle.net/wh4zquj3/. While typing the placeholder/ label disappears entirely. Once the input field loses focus everything is fine.

Ed: firefox 102.0, Mac OS 12.1

Ed 2: Also Chrome Version 103.0.5060.114

[simondrabble]

It looks like setting an explicit z-index will cause the label to show correctly:

.form-floating > label {
    z-index: 1000;
}