How To Prevent Ant design Form Validation Messages from breaking & bugging

user_19443806 0
Viewed 30

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>
antd reactjs forms css javascript
1 Answers

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

user_194438060
Related