css - Antd内联子窗体宽度
问题描述
我有一个表格,我想内联一个选择填充前 60% 的空间,提交按钮填充接下来的 40%。如果没有选择和按钮大小不正确,我无法弄清楚如何做到这一点。选择大小本身以匹配其输入,从几乎没有大小开始。按钮的大小小于其文本。在这种情况下你应该怎么做?
<Form layout="inline">
<Form.Item style={{width:'60%'}}>
{getFieldDecorator('studentId', {
rules: [{ required: true, message: 'You must select a student' }],
})(
<Select style={{width:'100%'}}>
{this.props.linkedStudents.map(x => <Select.Option value={x.id}>{x.fullName}</Select.Option>)}
</Select>
)}
</Form.Item>
<Form.Item style={{width:'30%'}}>
<Button
type="primary"
htmlType="submit"
style={{ width: '30%' }}
>
Remove from Team
</Button>
</Form.Item>
</Form>
解决方案
你需要改变ant-form-item-control-wrapper
风格。您可以通过CSS
或通过Form.Item
'wrapperCol
属性来完成。
为了使下面的工作,您需要将Select
's包装Form.Item
在一个带有 a 的元素中className="select-container"
.select-container.ant-form-item-control-wrapper {
width: 100%;
}
或者
<Form.Item wrapperCol={{ sm: 24 }} style={{ width: "60%", marginRight: 0 }}>
工作示例:https ://codesandbox.io/s/w0voxxxzm5 (假设您不希望选择和按钮之间有任何间隙)
组件/InlineForm.js
import React, { PureComponent } from "react";
import { Button, Form, Select } from "antd";
const { Item } = Form;
const { Option } = Select;
const students = [
{
id: 1,
fullName: "Bob Smith"
},
{
id: 2,
fullName: "Amber Johnson"
}
];
class InlineForm extends PureComponent {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
alert(JSON.stringify(values, null, 4));
}
});
};
render = () => {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} layout="inline">
<Item
wrapperCol={{ sm: 24 }}
style={{ width: "60%", height: 60, marginBottom: 0, marginRight: 0 }}
>
{getFieldDecorator("studentId", {
rules: [{ required: true, message: "You must select a student" }]
})(
<Select style={{ width: "100%" }}>
{students.map(({ id, fullName }) => (
<Option key={fullName} value={id}>
{fullName}
</Option>
))}
</Select>
)}
</Item>
<Item wrapperCol={{ sm: 24 }} style={{ width: "40%", marginRight: 0 }}>
<Button type="primary" htmlType="submit" style={{ width: "100%" }}>
Register
</Button>
</Item>
</Form>
);
};
}
export default Form.create({ name: "inline-form" })(InlineForm);
推荐阅读
- makefile - 确保从特定目录调用 make
- wordpress - 用 wordpress 重写规则
- javascript - 需要使用 jQuery / 不使用 AJAX / 提交 Add to Cart 表单
- jenkins - 我想通过使用扩展的选择参数来选择多个选择,并且从这些选择中我想通过传递一个刺匹配来运行作业
- r - 当数据是整洁(长)格式时,使用 ggplot 制作许多散点图
- python-2.7 - 检查一组索引中的行是否重复并重建
- html - 评估然后从 MailApp 电子邮件发送 HTML
- hive - Hue 工作流程中的 Sqoop 失败
- python - python pip 要求我更新,但它已经更新了
- python - 无法定位元素:通过 Selenium 和 Python 单击按钮时