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

Merged

Conversation

Projects
None yet
2 participants
@sbusch
Copy link
Contributor

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:

grafik

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

  • Doc is not needed
  • Demo is not needed
  • TypeScript definition is not needed
  • Changelog is not needed
prevent negative margin-bottom for form-item-with-help
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)

@pr-triage pr-triage bot added the PR: unreviewed label May 14, 2019

@afc163 afc163 merged commit aa70d14 into ant-design:master May 14, 2019

13 of 27 checks passed

ci/circleci: test_dom Your tests failed on CircleCI
Details
ci/circleci: test_node Your tests failed on CircleCI
Details
Semantic Pull Request add a semantic commit or PR title
Details
ant-design.ant-design in progress
Details
ci/circleci: test_dist Your tests are queued behind your running builds
Details
ci/circleci: test_dist_15 Your tests are queued behind your running builds
Details
ci/circleci: test_dom_15 CircleCI is running your tests
Details
ci/circleci: test_es Your tests are queued behind your running builds
Details
ci/circleci: test_es_15 Your tests are queued behind your running builds
Details
ci/circleci: test_lib Your tests are queued behind your running builds
Details
ci/circleci: test_lib_15 Your tests are queued behind your running builds
Details
deploy/netlify Deploy preview processing.
Details
Header rules No header rules processed
Details
Pages changed 212 new files uploaded
Details
CodeFactor 1 issue fixed.
Details
DEP All dependencies are resolved
LGTM analysis: JavaScript No code changes detected
Details
Mixed content No mixed content detected
Details
Redirect rules 18 redirect rules processed
Details
WIP Ready for review
Details
buildsize No change
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected

@pr-triage pr-triage bot added PR: merged and removed PR: unreviewed labels May 14, 2019

@netlify

This comment has been minimized.

Copy link

commented May 14, 2019

Deploy preview for ant-design ready!

Built with commit 8c9b6ec

https://deploy-preview-16584--ant-design.netlify.com

@sbusch sbusch deleted the sbusch: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
You can鈥檛 perform that action at this time.