Fix AutoComplete and Input Group vertical align issue

yfge · May 28, 2017 · 14844eb · 14844eb
1 parent 62f4e44
commit 14844eb
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less
@@ -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,17 +36,17 @@
     }
 
     &-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();
       }
     }
 
     &-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();

diff --git a/components/input/Input.tsx b/components/input/Input.tsx
@@ -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) {

diff --git a/components/input/style/index.less b/components/input/style/index.less
@@ -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