Browse Source

🐛 Fix hasFeedback overlap issue with Input.Password

close #16443
pull/16445/head
afc163 6 years ago
parent
commit
715f2f6ebc
No known key found for this signature in database GPG Key ID: 738F973FCE5C6B48
  1. 6
      components/form/demo/register.md
  2. 5
      components/form/style/index.less

6
components/form/demo/register.md

@ -148,6 +148,7 @@ class RegistrationForm extends React.Component {
</Form.Item>
<Form.Item
label="Password"
hasFeedback
>
{getFieldDecorator('password', {
rules: [{
@ -156,11 +157,12 @@ class RegistrationForm extends React.Component {
validator: this.validateToNextPassword,
}],
})(
<Input type="password" />
<Input.Password />
)}
</Form.Item>
<Form.Item
label="Confirm Password"
hasFeedback
>
{getFieldDecorator('confirm', {
rules: [{
@ -169,7 +171,7 @@ class RegistrationForm extends React.Component {
validator: this.compareToFirstPassword,
}],
})(
<Input type="password" onBlur={this.handleConfirmBlur} />
<Input.Password onBlur={this.handleConfirmBlur} />
)}
</Form.Item>
<Form.Item

5
components/form/style/index.less

@ -163,13 +163,16 @@ input[type='checkbox'] {
text-align: center;
}
// 表单下的输入框尺寸唯一: 大尺寸
form {
.has-feedback {
.@{ant-prefix}-input {
padding-right: 24px;
}
.@{ant-prefix}-input-password-icon {
margin-right: 18px;
}
// Fix overlapping between feedback icon and <Select>'s arrow.
// https://github.com/ant-design/ant-design/issues/4431
> .@{ant-prefix}-select .@{ant-prefix}-select-arrow,

Loading…
Cancel
Save