Using Ant Design Forms Is A Pretty Good Practice Both For It's Beautiful UI And Simple Usage. Though I Get Some Weird Issue With UI. When I intentionally Fill Wrong Input It Gives An Error Message With Animation, But After Fixing That Antd Behaves strange A Little Bit. How To Fix That???
[2] Here Is My Form Code
<Form form={form} layout="vertical" onFinish={onFinish} autoComplete="off">
<Form.Item>Item name="message" label="Message" rules={[{ required: true, message: messages.description }]} > <Input /> </Form.Item>
<Form.Item name="rating" label="Rate Training">
<>
<Rate onChange={setValue} value={value} />
<span className="ant-rate-text"></span>
</>
</Form.Item>
<Form.Item>
<Button loading={isFeedbackSentLoading} type="primary" htmlType="submit" style={{ width: "100%" }}>
Submit
</Button>
</Form.Item>
</Form>
Here Is My Answer
Input And Label div Has A Parent div Named ant-form-item-control
Ant Design adds a new div Element with Error messages named ant-form-item-explain-error after incorrect Input and deletes It after fixing the input requirements
ant-form-item-explain-error div adding and deleting space in the browser that's why It breaks and bugs weirdly.
[1] To solve the issue we need to give a fixed space for the parent of both Input, label and error message if available at the moment
.ant-form-item-control {
height: 60px;
}
[2] There is another issue with responsivity when using on mobile the styles will not trigger because Ant Design disables It under the hood
In Dev Tools there is a Styles tab in it you can find this following style
@media (max-width: 575px) {
.ant-form .ant-form-item .ant-form-item-label,
.ant-form .ant-form-item .ant-form-item-control
{
/* flex: 0 0 100%; */
max-width: 100%;
}
}
You only need to disable style flex: 0 0 100%; and that style will also work on mobile