Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Feature request: official support for form-floating and input-group

Created by: 719media

There are quite a few issues in regards to using form-floating with input-group, and the proper markup for such: https://github.com/twbs/bootstrap/issues/34275 https://github.com/twbs/bootstrap/issues/34198 https://github.com/twbs/bootstrap/issues/33871 https://github.com/twbs/bootstrap/issues/33741 https://github.com/twbs/bootstrap/issues/33721 https://github.com/twbs/bootstrap/issues/33341

Bootstrap's reply is "not supported at this time". Makes sense. I really wanted to have this work, so went through various ways to make this happen. I think it can be supported fairly easily with just a few rule adjustments. So I'm leaving my findings here in hopes of discussion to support this in the main branch.

From my findings, there are 4 problems with using input-group with form-floating:

  1. What is the proper markup? Some people are combining input-group with form-floating in the same element, which causes problems when you have prefixes to the input-group such that the form-control isn't the first element in the group. The benefit to this approach is that it (sort of) fixes some of the border-radius issues. However, IMO the floating issues would be very difficult to solve cleanly. So, form-floating used on a child element of input-group works best here.

  2. z-index focus/hover issues. Solved by CSS rule.

  3. border-radius issues. Solved by CSS rule.

  4. form-control flex-grow issues. Solved by CSS rule.

My findings are most easily seen in the codepen provided below. I may be overlooking some cases, obviously. But, it seems to work for my purposes. Do you have any feedback?

Associated codepen: https://codepen.io/nefiga/pen/VwbpdVw

Anyway, feel free to close this if these types of requests are driving you nuts, just figured I'd at least provide feedback on what I assembled over a few hours.