How can I make buttons same height as input field?
Buttons with default configuration, has a fixed height of 2rem for some reason ,would be nice if the UI components of UI Kit (using @forge/react v11.7.0) or allow a way to use align-items: stretch, to match sibling elements, but that would require height auto on the buttons.
I don’t understand why the UI Kit components are so extremely limited, it just limits creativity.
Or do anyone have any suggestions for how I could achieve a similar layout?
The the component code is as follows…
<Box paddingBlockEnd="space.100" paddingBlockStart="space.100">
<Label labelFor="datepicker-format">Date</Label>
<Inline grow="fill" space="space.100" alignBlock="stretch">
<Button>-</Button>
<Box xcss={{ flexGrow: 1 }}>
<DatePicker
shouldShowCalendarButton
dateFormat="YYYY-MM-DD"
placeholder="2021-06-10"
id="datepicker-format"
/>
</Box>
<Button>+</Button>
</Inline>
</Box>