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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong Form.Field feedback's vertical position is off when using placed in a vertical Form layout #9153

eduludi opened this issue Jan 28, 2018 · 1 comment


Copy link

@eduludi eduludi commented Jan 28, 2018




macOS, Chrome and Safari

Reproduction link

IMPORTANT: This only happen when using a custom LESS theme, that's why it "works" in the reproduction example.

Steps to reproduce

Insert a Form.Field with hasFeedback in a Form with layout="vertical".

What is expected?

Form.Field's feedback to be aligned vertically, like this:

screen shot 2018-01-28 at 16 48 56

What is actually happening?

Feedback icons are offset, displaced vertically downwards:

screen shot 2018-01-28 at 16 48 44

Looks like when the less version get compiled, these styles are used:

.@{form-prefix-cls}-vertical {
  .@{form-prefix-cls}-item {
    padding-bottom: 8px;
  .@{form-prefix-cls}-item-control {
    line-height: @line-height-base; // <-- HERE
  .@{form-prefix-cls}-extra {
    margin-top: 2px;
    margin-bottom: -4px;

In .ant-form-item-control the line-heigh: @line-height-base; instead of line-height: @form-component-max-height - 0.0001px;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants