Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent negative margin-bottom for form items with help (e.g. validation errors) #16584



Copy link

@sbusch sbusch commented May 14, 2019

馃 This is a ...

  • Bug fix

馃懟 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:

margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;

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:
Try changing bottom-margin.

馃挕 Solution

This PR restricts the margin-bottom to be >= 0.

馃摑 Changelog

No visible changes from userside.

鈽戯笍 Self Check before Merge

  • Doc is not needed
  • Demo is not needed
  • TypeScript definition is not needed
  • Changelog is not needed
without this, value can become negative. this caused following fieldset to float
to the right of the field with validation errors

(cherry picked from commit 43da8a5)
@afc163 afc163 merged commit aa70d14 into ant-design:master May 14, 2019
15 of 27 checks passed
Copy link

@netlify netlify bot commented May 14, 2019

Deploy preview for ant-design ready!

Built with commit 8c9b6ec

@sbusch sbusch deleted the fix-form-item-with-help-negative-margin branch May 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants