Form item vertical align (#8415)

* fix formItem vertical align

* fix formItem vertical align

* rebase master
This commit is contained in:
ddcat1115 2017-12-04 14:00:15 +08:00 committed by 偏右
parent ebcf7b43e8
commit 1f0ee08574

View File

@ -97,7 +97,7 @@ input[type="checkbox"] {
&-label { &-label {
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
line-height: @form-component-height; line-height: @form-component-height - 0.0001px;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -245,6 +245,12 @@ form {
// Fix https://github.com/ant-design/ant-design/issues/6097 // Fix https://github.com/ant-design/ant-design/issues/6097
&:only-child { &:only-child {
display: block; display: block;
&.@{ant-prefix}-select-sm,
&.@{ant-prefix}-cascader-picker-small {
position: relative;
top: (@input-height-base - @input-height-sm) / 2;
}
} }
} }
@ -259,20 +265,41 @@ form {
.@{ant-prefix}-input-group-addon .@{ant-prefix}-cascader-picker { .@{ant-prefix}-input-group-addon .@{ant-prefix}-cascader-picker {
&:only-child { &:only-child {
display: inline-block; display: inline-block;
&.@{ant-prefix}-select-sm,
&.@{ant-prefix}-cascader-picker-small {
top: 0;
}
} }
} }
// fix input with addon position. https://github.com/ant-design/ant-design/issues/8243 // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
.@{ant-prefix}-input-group-wrapper { .@{ant-prefix}-input-group-wrapper {
&.@{ant-prefix}-input-group-wrapper-sm {
position: relative; position: relative;
top: (@input-height-lg - @input-height-base) / 2; top: (@input-height-base - @input-height-sm) / 2;
}
&.@{ant-prefix}-input-group-wrapper-lg {
top: 0;
} }
&.@{ant-prefix}-input-group-wrapper-sm { // fix large size vertical align. https://github.com/ant-design/ant-design/issues/8336
top: (@input-height-lg - @input-height-sm) / 2; .@{ant-prefix}-input-lg,
.@{ant-prefix}-input-number-lg,
.@{ant-prefix}-cascader-picker-large,
.@{ant-prefix}-select-lg,
.@{ant-prefix}-calendar-picker-large,
.@{ant-prefix}-time-picker-large,
.@{ant-prefix}-radio-group-large,
.@{ant-prefix}-input-group-wrapper-lg .@{ant-prefix}-input-group-addon {
position: relative;
top: (@input-height-base - @input-height-lg) / 2;
}
.@{ant-prefix}-cascader-picker-large,
.@{ant-prefix}-calendar-picker-large,
.@{ant-prefix}-input-group-wrapper-lg .@{ant-prefix}-input-group-addon {
.@{ant-prefix}-input-lg,
.@{ant-prefix}-select-lg {
top: 0;
} }
} }
} }