Fix search input margin bug

ant-design · May 12, 2016 · 7b7f846 · 7b7f846
1 parent 8da28d8
commit 7b7f846
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/components/form/demo/search-input.md b/components/form/demo/search-input.md
@@ -6,7 +6,7 @@ title: 搜索框
 带有搜索按钮。
 
 ````jsx
-import { Icon, Input, Button } from 'antd';
+import { Input, Button } from 'antd';
 import classNames from 'classnames';
 const InputGroup = Input.Group;
 
@@ -33,6 +33,7 @@ const SearchInput = React.createClass({
     }
   },
   render() {
+    const { style, size, ...restProps } = this.props;
     const btnCls = classNames({
       'ant-search-btn': true,
       'ant-search-btn-noempty': !!this.state.value.trim(),
@@ -42,21 +43,21 @@ const SearchInput = React.createClass({
       'ant-search-input-focus': this.state.focus,
     });
     return (
-      <InputGroup className={searchCls} style={this.props.style}>
-        <Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
-          onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch} />
-        <div className="ant-input-group-wrap">
-          <Button className={btnCls} size={this.props.size} onClick={this.handleSearch}>
-            <Icon type="search" />
-          </Button>
-        </div>
-      </InputGroup>
+      <div className="ant-search-input-wrapper" style={style}>
+        <InputGroup className={searchCls}>
+          <Input {...restProps} value={this.state.value} onChange={this.handleInputChange}
+            onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch} />
+          <div className="ant-input-group-wrap">
+            <Button icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
+          </div>
+        </InputGroup>
+      </div>
     );
   },
 });
 
 ReactDOM.render(
   <SearchInput placeholder="input search text"
-    onSearch={(value) => console.log(value)} style={{ width: 200 }} />
+    onSearch={value => console.log(value)} style={{ width: 200 }} />
 , mountNode);
 ````
diff --git a/components/form/index.md b/components/form/index.md
@@ -22,15 +22,15 @@ english: Form
 
 这里我们分别封装了表单域 `<Form.Item />` 和输入控件 `<Input />`。
 
-```html
+```jsx
 <Form.Item {...props}>
   {children}
 </Form.Item>
 ```
 
 ## Input 输入框
 
-```html
+```jsx
 <Input {...props} />
 ```
 

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -200,14 +200,20 @@ form {
   }
 }
 
+.ant-search-input-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .ant-search-input {
   &.ant-input-group .ant-input:first-child {
     border-radius: @border-radius-base;
+    position: absolute;
+    top: -1px;
   }
   .ant-search-btn {
     .btn-default;
     border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
-    margin-left: -100%;
     left: -1px;
     position: relative;
     border-width: 0 0 0 1px;