es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Es posible hacer flexible el FormItem de antd?

18 Jun, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    1. Primero, agrega una clase al componente Row para que podamos seleccionarlo en CSS. Por ejemplo, class="filter-row".

    2. Luego, agrega los siguientes estilos CSS a la clase filter-row:

    .filter-row {
   display: flex;
   flex-wrap: wrap;
}

    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.

    1. Finalmente, elimina cualquier ancho fijo de los componentes Col y agrega la propiedad flex en su lugar. Por ejemplo:
    <col md="{5}" sm="{24}" flex="{1}">
   <formitem label="fecha de creación：">
      {getFieldDecorator('activityCreateTime', {
      })(<rangepicker classname="{styles.rangepicker}" format="{dateFormat}"></rangepicker>)}
   </formitem>

    Al establecer flex={1}, cada componente Col tomará el mismo espacio dentro del Row.

    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.

Comments are closed.