Search code examples
javascriptreactjsantd

How to avoid input size shrinking in a Space component? [antd]

My input takes the whole width, which is excepted behavior.

<Input placeholder='Filter' style={{ marginBottom: 50}}/>

enter image description here

Now I need to add a button behind this input. I decided to use the Space component, but then the input shrank. How can I have an input filling the whole space in a Space component ?

<Space>
<Input placeholder='Filter'/>
<Button type='primary'>Filter</Button>
</Space>

enter image description here

Solution

  • You're better off just using a div. My personal experience with AntD is that it's really hard to "customize" layouts/spacing using their components, even when attempting to style them with the style attribute.

    // Works
<div style={{ display: "flex", gap: "8px" }}>
<Input placeholder='Filter'/>
<Button type='primary'>Filter</Button>
</div>

// Doesn't work
<Space style={{ display: "flex" }}>
<Input placeholder='Filter' style={{ flex: "auto" }} />
<Button type='primary'>Filter</Button>
</Space>