0
257
ViewsHow 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}}/>
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>
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question