El uso de formularios de diseño de hormigas es una práctica bastante buena tanto por su hermosa interfaz de usuario como por su uso simple. Aunque tengo un problema extraño con la interfaz de usuario. Cuando intencionalmente relleno la entrada incorrecta, aparece un mensaje de error con la animación, pero después de arreglar eso, Antd se comporta un poco extraño. ¿Cómo arreglar eso?
[2] Aquí está mi código de formulario
<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
Entrada y etiqueta div tiene un div padre llamado ant-form-item-control
Ant Design agrega un nuevo elemento div con mensajes de error llamado ant-form-item-explain-error después de una entrada incorrecta y lo elimina después de corregir los requisitos de entrada
ant-form-item-explain-error div agregando y eliminando espacio en el navegador, es por eso que se rompe y falla de manera extraña.
[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
En Dev Tools hay una pestaña de Estilos, puede encontrar el siguiente estilo
@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%; } } Solo necesita deshabilitar style flex: 0 0 100%; y ese estilo también funcionará en el móvil