Встроенная форма Antd, ширина детей

Question

У меня есть форма, которую я хотел бы вставить в строку ввода, заполнив первые 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>

Answer 1

Вам нужно изменить стиль ant-form-item-control-wrapper.Вы можете сделать это через CSS или через свойство Form.Item s wrapperCol.

Чтобы ниже работало, вы захотите обернуть Select 'Form.Item вэлемент с className="select-container"

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

или

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

sm относится к расположению столбцов и 24к контуру .

Рабочий пример: 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);