Fix error messages not being displayed with nested input elements#314
Merged
ADmad merged 2 commits intoFriendsOfCake:cake-4-bs-4from May 31, 2020
Merged
Fix error messages not being displayed with nested input elements#314ADmad merged 2 commits intoFriendsOfCake:cake-4-bs-4from
ADmad merged 2 commits intoFriendsOfCake:cake-4-bs-4from
Conversation
The error message element is not being displayed when it's not a sibling of an (input) element with an `is-invalid` class, which is the case for: * Input groups * Horizontally aligned checkboxes * Custom file controls
Codecov Report
@@ Coverage Diff @@
## cake-4-bs-4 #314 +/- ##
=================================================
+ Coverage 89.46% 89.56% +0.10%
- Complexity 272 277 +5
=================================================
Files 19 19
Lines 816 824 +8
=================================================
+ Hits 730 738 +8
Misses 86 86
Continue to review full report at Codecov.
|
Contributor
|
@D4rkMindz please have a look and give feedback if you have any issues. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
So it's been some time, but there hasn't really been any feedback on how to handle it.
The source of the problem is that the error message element is not a sibling of an (input) element with an
is-invalidclass. This PR fixes that problem in 3 different places, where the input element is nested in a div:For input groups, Bootstrap now officially suggests to put the validation response as a sibling to an input group with an
is-invalidclass, so I thought it's safe to go that route, and add the error class to the input group wrapper. Before/After:In horizontally aligned checkboxes, the message (and help text) is moved into the nesting div, which markup wise and visually will unify with default aligned checkboxes. Before/After:
For custom file controls I've chosen adding the error class to the wrapper div too, just like for input groups, because a) moving the message element into the wrapper requires some bigger changes with additional templates, and b) it produces a visual glitch as Bootstrap by default restricts the elements height, causing the error message to "overlfow" and being placed over other elements. Before/After:
Problem with message in the wrapper:
A word of warning, none of these fixes are compatible with custom client-side validation, but it didn't work before either, so there's that.
ps. The tests keep growing and growing, and I think I could combine the tooltip and error tests, and also throw in help text usage, that would reduce the clutter a bit, but I'd do that in a followup, I need some rest first, putting these tests together is really tedious.
/cc @ravage84 Not sure, but IIRC you wanted to be notified about this.