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

Closed
eduludi opened this Issue Jan 28, 2018 · 1 comment

Comments

Projects
None yet
3 participants
@eduludi
Contributor

eduludi commented Jan 28, 2018

Version

3.1.5

Environment

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.

https://codesandbox.io/s/328nvpo8oq

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}-explain,
  .@{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;

@benjycui

This comment has been minimized.

Contributor

benjycui commented Feb 8, 2018

@eduludi PR is welcomed, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment