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
Support form-floating
on input-group
#34527
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me, awesome work! Thanks!
I made a fork of your CodePen using the new 5.1
docs path to show the result.
The question now is whether we want to support this or not? What weird issues may pop out of this?
@ffoodd |
Indeed, nice move! I didn't catch this, thanks :) |
It would be awesome if this could be merged for 5.2 |
@719media We reverted the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is still an issue with this if we add validation feedbacks .valid-feedback
, .invalid-feedback
.
@nkdas91 Yes, good catch. My personal opinion of bootstrap validation is that it is so incredibly brittle, I never use it. For me, this is another example of such. However, if you change the https://codepen.io/nefiga/pen/KKXapZG Fieldset is a valid tag that can be used with the valid/invalid selectors (see https://html.spec.whatwg.org/multipage/semantics-other.html#selector-invalid). One issue that DOES crop up in your example that really isn't a problem with form-floating (or this PR), is that the border on the end is no longer rounded. This is because of an issue with rounded corners CSS in bootstrap, and the same issue can actually be seen in bootstrap validation examples if you modify the example to have multiple feedback DIVs, as I have done in the above pen |
form-floating
on input-group
Back to this: this PR lacks documentation and examples, which would allow to mention edge cases. Regarding validation feedback, using Then you may use spacing utilities to align things as intended, and you'd benefit from the I made a quick working CodePen demonstrating this. Could be made better by using If that sounds good to all of you, @719media would you mind trying to add some docs for this? I guess the form floating page at least need some updates, and maybe the validation page too? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At least needs docs :)
@ffoodd OK I have added some basic docs for the floating labels page. |
Would be nice if this PR could me merged. Thanks! |
@ffoodd any way we could get this merged for 5.2.0? Thanks |
Any updates on this? What speaks against merging this? |
Waiting on an update for this as well |
@mdo Any changes requested to get this merged? Or are there things that still just don't feel right here you can expound on? |
Fixes #36636 |
Rebased, squashed, and edited a couple things in #36759. Closing this PR for that one. |
Making input-group work with form-floating.
Fixes #34513