mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

💄 Fix extra margin of nested form item

Browse Source 
close #13748
This commit is contained in:
afc163 2018-12-22 16:44:10 +08:00
parent a7597819a2
commit d78d0de36c
No known key found for this signature in database
GPG Key ID: 5F00908D72002306
3 changed files with 88 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -4328,6 +4328,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div>
<div
class="ant-row ant-form-item"
style="margin-bottom:0"
>
<div
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4349,114 +4350,104 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-children"
>
<div
class="ant-col-11"
class="ant-row ant-form-item ant-form-item-with-help"
style="display:inline-block;width:calc(50% - 12px)"
>
<div
class="ant-row ant-form-item ant-form-item-with-help"
class="ant-form-item-control-wrapper"
>
<div
class="ant-form-item-control-wrapper"
class="ant-form-item-control has-error"
>
<div
class="ant-form-item-control has-error"
<span
class="ant-form-item-children"
>
<span
class="ant-form-item-children"
class="ant-calendar-picker"
>
<span
class="ant-calendar-picker"
>
<div>
<input
class="ant-calendar-picker-input ant-input"
placeholder="Select date"
readonly=""
value=""
/>
<i
class="anticon anticon-calendar ant-calendar-picker-icon"
<div>
<input
class="ant-calendar-picker-input ant-input"
placeholder="Select date"
readonly=""
value=""
/>
<i
class="anticon anticon-calendar ant-calendar-picker-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</div>
</span>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</div>
</span>
<div
class="ant-form-explain"
>
Please select the correct date
</div>
</span>
<div
class="ant-form-explain"
>
Please select the correct date
</div>
</div>
</div>
</div>
<div
class="ant-col-2"
<span
style="display:inline-block;width:24px;text-align:center"
>
<span
style="display:inline-block;width:100%;text-align:center"
>
-
</span>
</div>
-
</span>
<div
class="ant-col-11"
class="ant-row ant-form-item"
style="display:inline-block;width:calc(50% - 12px)"
>
<div
class="ant-row ant-form-item"
class="ant-form-item-control-wrapper"
>
<div
class="ant-form-item-control-wrapper"
class="ant-form-item-control"
>
<div
class="ant-form-item-control"
<span
class="ant-form-item-children"
>
<span
class="ant-form-item-children"
class="ant-calendar-picker"
>
<span
class="ant-calendar-picker"
>
<div>
<input
class="ant-calendar-picker-input ant-input"
placeholder="Select date"
readonly=""
value=""
/>
<i
class="anticon anticon-calendar ant-calendar-picker-icon"
<div>
<input
class="ant-calendar-picker-input ant-input"
placeholder="Select date"
readonly=""
value=""
/>
<i
class="anticon anticon-calendar ant-calendar-picker-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</div>
</span>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</div>
</span>
</div>
</span>
</div>
</div>
</div>

31
components/form/demo/validate-static.md
View File

@ -23,7 +23,7 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
````jsx
import {
Form, Input, DatePicker, Col, TimePicker, Select, Cascader, InputNumber,
Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber,
} from 'antd';
const FormItem = Form.Item;
@ -141,22 +141,21 @@ ReactDOM.render(
<FormItem
label="inline"
{...formItemLayout}
style={{ marginBottom: 0 }}
>
<Col span={11}>
<FormItem validateStatus="error" help="Please select the correct date">
<DatePicker />
</FormItem>
</Col>
<Col span={2}>
<span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
-
</span>
</Col>
<Col span={11}>
<FormItem>
<DatePicker />
</FormItem>
</Col>
<FormItem
validateStatus="error"
help="Please select the correct date"
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
>
<DatePicker />
</FormItem>
<span style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}>
-
</span>
<FormItem style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
<DatePicker />
</FormItem>
</FormItem>
<FormItem

6
components/form/style/index.less
View File

@ -74,12 +74,6 @@ input[type='checkbox'] {
margin-bottom: @form-item-margin-bottom;
vertical-align: top;
// nested FormItem
&-control > &:last-child,
& [class^='@{ant-prefix}-col-'] > &:only-child {
margin-bottom: -@form-item-margin-bottom;
}
&-control {
line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
position: relative;