Fix AutoComplete and Input Group vertical align issue

This commit is contained in:
afc163 2017-05-28 15:27:55 +08:00
parent 62f4e44ac6
commit 14844eb0e0
3 changed files with 17 additions and 8 deletions

View File

@ -16,11 +16,11 @@
margin-left: 0;
margin-right: 0;
height: 100%;
line-height: @input-height-base;
}
&__placeholder {
margin-left: 8px;
margin-right: 8px;
top: @input-height-base / 2;
}
}
}
@ -36,8 +36,8 @@
}
&-lg {
.@{select-prefix-cls}-selection__placeholder {
top: @input-height-lg / 2;
.@{select-prefix-cls}-selection__rendered {
line-height: @input-height-lg;
}
.@{input-prefix-cls} {
.input-lg();
@ -45,8 +45,8 @@
}
&-sm {
.@{select-prefix-cls}-selection__placeholder {
top: @input-height-sm / 2;
.@{select-prefix-cls}-selection__rendered {
line-height: @input-height-sm;
}
.@{input-prefix-cls} {
.input-sm();

View File

@ -176,18 +176,23 @@ export default class Input extends Component<InputProps, any> {
</span>
) : null;
const className = classNames({
[`${props.prefixCls}-wrapper`]: true,
const className = classNames(`${props.prefixCls}-wrapper`, {
[wrapperClassName]: (addonBefore || addonAfter),
});
return (
const node = (
<span className={className}>
{addonBefore}
{children}
{addonAfter}
</span>
);
// Need another wrapper for changing display:table to display:inline-block
if (addonBefore || addonAfter) {
return <span className={`${props.prefixCls}-group-wrapper`}>{node}</span>;
}
return node;
}
renderLabeledIcon(children) {

View File

@ -11,6 +11,10 @@
//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
.input-group(~"@{ant-prefix}-input");
&-wrapper {
display: inline-block;
vertical-align: middle;
}
}
// Input with affix: prefix or suffix