I need to customize the layout of a form to display checkboxes in vertical mode. Specifically, there is a row of checkboxes that I want to appear vertically aligned rather than horizontally.
In the past, I was able to achieve this in antd 4 by applying a custom CSS class as an override.
Below is a snippet of how the form items are structured within the vertical form:
<Row className="horizontal-override">
<Form.Item name="Available" label="Available" valuePropName="checked">
<Checkbox onChange={onInputChange} />
</Form.Item>
<Divider type="vertical" />
<Form.Item name="ShipHomeOnly" label="ShipHome Only" valuePropName="checked">
<Checkbox onChange={onInputChange} />
</Form.Item>
...//More of the same
</Row>
The previous CSS override used in antd 4 looked like this:
.ant-form{
.horizontal-override{
.ant-form-item{
flex-direction: inherit;
label{
display: inline-flex;
height: 32px;
margin-right: 4px;
align-items: center;
}
}
}
}
This CSS class was able to replicate the horizontal styling for the row of checkboxes within the form.
However, with antd version 5, the styling has undergone significant changes, and I am currently unable to find a solution to achieve the same effect.