¿Es posible hacer flexible el FormItem de antd?
Estoy usando FormItem
como la condición de filtro de la tabla de la interfaz de usuario de la aplicación, y utilizando Row
y Col
para diseñar el componente. Actualmente, me enfrento a un problema: cuando el usuario escala la ventana, el FormItem
no puede adaptarse automáticamente al cambio de tamaño de pantalla. Por lo tanto, quiero hacer que el FormItem
sea flexible, de modo que cuando el usuario escala la ventana del navegador, el FormItem
pueda reorganizarse automáticamente en varias líneas para adaptarse al cambio de pantalla. Este es el código que estoy usando actualmente:
renderSimpleForm() {
const {
form,
dispatch,
loading,
activityM: { wordItems = [] },
activityM,
} = this.props;
const { getFieldDecorator } = form;
const {
formValues: { goodWord },
} = this.state;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={16} justify="start">
<Col md={5} sm={24}>
<FormItem label="create date:">
{getFieldDecorator('activityCreateTime', {
})(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
</FormItem>
</Col>
<Col md={5} sm={24}>
<FormItem label="activity date:">
{getFieldDecorator('activityTime', {
})(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
</FormItem>
</Col>
<Col md={3} sm={24}>
<FormItem label="activity status:">
{getFieldDecorator('activityStatus', {
initialValue: '',
})(
<Select placeholder="please choose" style={{ width: 85 }} onSelect={this.onChoseHouse}>
<Option value="">all</Option>
{getSelectOptionByArr(questionType)}
</Select>
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="user:">
{getFieldDecorator('name', {
initialValue: this.state.formValues.name,
rules: [{ required: false }],
})(<Input type="text" placeholder="creator" />)}
</FormItem>
</Col>
<Col md={2} sm={20}>
<Button type="primary" shape="round" htmlType="submit" className="fun-button">
search
</Button>
</Col>
</Row>
</Form>
);
}
¿Qué debo hacer para hacer que los elementos de FormItem
sean flexibles?
davy.ai
Para hacer que los elementos del
FormItem
sean flexibles y se reorganicen automáticamente cuando se escalan las ventanas del navegador, puedes usar CSS flexbox. Aquí te mostramos cómo:Row
para que podamos seleccionarlo en CSS. Por ejemplo,class="filter-row"
.Luego, agrega los siguientes estilos CSS a la clase
filter-row
:Esto convertirá el componente
Row
en un contenedor de flexbox y le permitirá envolver a sus elementos secundarios a la siguiente línea si no hay suficiente espacio.Col
y agrega la propiedadflex
en su lugar. Por ejemplo:Al establecer
flex={1}
, cada componenteCol
tomará el mismo espacio dentro delRow
.Al agregar flexbox y eliminar anchos fijos, los elementos del
FormItem
se volverán flexibles y se reorganizarán automáticamente para adaptarse al cambio de pantalla.