ant.design input group width 100% of a Col without breaking the lines

user_936651 0
Viewed 8527

I have ant.design Input.Group with Select and Button.
I want to make them 100% of a Col (of any size).
the following code breaking the line between the Select and the Button https://codesandbox.io/s/peaceful-bogdan-2z8ot

enter image description here

   <Row>
    <Col span={6}>
      <Form.Item label="Label">
        <InputGroup style={{ width: "100%" }} compact>
          <Select style={{ width: "100%" }} placeholder="Select a person">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
          </Select>
          <Button icon="form" />
        </InputGroup>
      </Form.Item>
    </Col>
  </Row>

I need a solution that will be suitable for any Col width / span.

Thanks

The link again: https://codesandbox.io/s/peaceful-bogdan-2z8ot

antd reactjs
1 Answers

I'm not sure how this will influence your other layout, but if you are fine with inline css then try adding whiteSpace: 'nowrap' in the style of your InputGroup.

        <InputGroup style={{ width: "100%" }} compact>
          <Select style={{ width: "calc(100% - 32px)" }} placeholder="Select a person">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="tom">Tom</Option>
          </Select>
          <Button icon="form" />
        </InputGroup>
user_117614170
Related