Antd Inline Form Width of Children

Question

I have a form that I would like to be inline with a select filling up the first 60% of space and the submit button filling up the next 40%. I can't figure out how to do this without the select and the button sizing themselves incorrectly. The select sizes itself to match its input, starting with almost no size. The button takes on a size less than its text. What are you supposed to do in this situation?

<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>

Solution

You need to alter the ant-form-item-control-wrapper style. You can do it through CSS or through the Form.Item's wrapperCol property.

For the below to work, you'll want to wrap the Select's Form.Item in an element with a className="select-container"

.select-container.ant-form-item-control-wrapper {
  width: 100%;
}

or

<Form.Item wrapperCol={{ sm: 24 }} style={{ width: "60%", marginRight: 0 }}>

The sm refers the column layout and 24 refers to the outline.

Working example: https://codesandbox.io/s/w0voxxxzm5 (this assumes you don't want any gutter between the select 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);

Comments

[Filip Grebowski]

Please provide a jsfiddle of this specific scenario.