To customize the appearance of the ant-form-item-control-wrapper, you have two options: use CSS directly or modify the wrapperCol property of the Form.Item.
In order for the following code snippet to take effect, ensure that the Select component within the Form.Item is enclosed within an element with the class select-container:
.select-container.ant-form-item-control-wrapper {
width: 100%;
}
Alternatively, you can achieve the same result by using the following code:
<Form.Item wrapperCol={{ sm: 24 }} style={{ width: "60%", marginRight: 0 }}>
The sm attribute corresponds to the column layout, while the value 24 refers to the outline of the column.
For a live demonstration, you can visit the following link: https://codesandbox.io/s/w0voxxxzm5 (assuming you prefer no gap between the select component and the button).
components/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);