Prevent negative margin-bottom for form items with help (e.g. validation errors) #16584
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.
馃 This is a ...
馃懟 What's the background?
Depending on some LESS variables, the margin-bottom of form items with help texts (e.g. validation errors) can possibly become negative:
Excerpt from
components/form/style/index.less
:This can cause the next DOM element (e.g. an fieldset) to float right to the field with the validation error:
You can see the effect in the wild here in this CodePen: https://codesandbox.io/s/1ovwxmjr7q
Try changing bottom-margin.
馃挕 Solution
This PR restricts the margin-bottom to be >= 0.
馃摑 Changelog
No visible changes from userside.
鈽戯笍 Self Check before Merge