From 8c50e283f64a4d2021760932c41607cc5fe94f70 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Thu, 31 Dec 2015 15:57:24 +0800
Subject: [PATCH] fix: FormItem should support long help message #785

---
 components/form/FormItem.jsx | 1 +
 components/form/demo/mix.md  | 4 ++--
 style/components/form.less   | 9 +++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx
index b1ac4660f2..724bbabae6 100644
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -108,6 +108,7 @@ class FormItem extends React.Component {
     const itemClassName = {
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-compact`]: this._isCompact(props.children),
+      [`${prefixCls}-item-with-help`]: !!props.help,
     };
 
     return (
diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
index 6ecfd53f40..64ee51e626 100644
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -120,13 +120,13 @@ const Demo = React.createClass({
         <FormItem
           label="logo图："
           labelCol={{span: 8}}
-          wrapperCol={{span: 16}}>
+          wrapperCol={{span: 16}}
+          help="提示信息要长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长">
           <Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
             <Button type="ghost">
               <Icon type="upload" /> 点击上传
             </Button>
           </Upload>
-          <p>仅支持上传一张。</p>
         </FormItem>
         <Row>
           <Col span="16" offset="8">
diff --git a/style/components/form.less b/style/components/form.less
index 5fb75dc1c3..8a9c884def 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -71,6 +71,10 @@ input[type="checkbox"] {
   margin-bottom: @form-item-margin-bottom;
   color: #666;
 
+  &.@{css-prefix}form-item-with-help {
+    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
+  }
+
   > label {
     color: @label-color;
     text-align: right;
@@ -104,10 +108,7 @@ input[type="checkbox"] {
 }
 
 .@{css-prefix}form-explain {
-  position: absolute;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  bottom: -@line-height-computed;
+  float: left;
 }
 
 
-- 
GitLab