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.

Evitar que el selector de fechas se desplace con la página.

27 Jul, 2023 Programación

Estoy haciendo una aplicación de React que tiene un datepicker hecho con antd.

Código simple del archivo index.js:

import React from "react";
import ReactDOM from "react-dom";
import { DatePicker } from "antd";
import "antd/dist/antd.css";
import "./index.css";

ReactDOM.render(
  <div classname="App">
    <h1>Select date-picker scroll bug.</h1>
    <div style="{{" margintop:="" "16px",="" width:="" 500,="" overflow:="" "scroll",="" height:="" 400="" }}="">
      <datepicker></datepicker>
      <div style="{{" minheight:="" 500="" }}=""></div>
    </div>
  </div>,
  document.getElementById("root")
);

Ejemplo funcional:

Edit antd reproduction template (forked)

Para reproducirlo: si el usuario hace clic en el campo de entrada, se muestra el datepicker, pero cuando intentamos desplazarnos hacia abajo, el datepicker también se desplaza junto con la página.

Resultado esperado: el datepicker no debería desplazarse y debería estar debajo del campo de entrada.

Cualquier ayuda sería muy apreciada. Gracias de antemano.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para solucionar el error de desplazamiento del Antd DatePicker

    Para solucionar el problema de que el DatePicker de Antd se desplace junto con la página cuando el usuario intenta desplazarse hacia abajo, es necesario agregar una nueva clase CSS con position: absolute al componente DatePicker.

    Aquí están los pasos a seguir:

    1. Agrega una nueva clase CSS al archivo index.css (o cualquier otro archivo CSS desde donde estés importando estilos). Por ejemplo:
    .date-picker-container {
  position: absolute;
}
    1. Modifica el componente DatePicker para agregar la nueva clase CSS:
    <datepicker popupstyle="{{" position:="" 'absolute'="" }}="" classname="date-picker-container"></datepicker>
    1. Actualiza la propiedad CSS overflow del div padre a auto en lugar de scroll:
    <div style="{{" margintop:="" "16px",="" width:="" 500,="" overflow:="" "auto",="" height:="" 400="" }}="">

    ¡Y eso es todo! Ahora el DatePicker de Antd no se desplazará junto con la página y se mostrará debajo del cuadro de entrada como se espera.

    Aquí está el código actualizado:

    import React from "react";
import ReactDOM from "react-dom";
import { DatePicker } from "antd";
import "antd/dist/antd.css";
import "./index.css";

ReactDOM.render(
  <div classname="App">
    <h1>Seleccionar fecha del DatePicker con error de desplazamiento.</h1>
    <div style="{{" margintop:="" "16px",="" width:="" 500,="" overflow:="" "auto",="" height:="" 400="" }}="">
      <datepicker popupstyle="{{" position:="" 'absolute'="" }}="" classname="date-picker-container"></datepicker>
      <div style="{{" minheight:="" 500="" }}=""></div>
    </div>
  </div>,
  document.getElementById("root")
);

    ¡Espero que esto ayude! Avísame si tienes alguna pregunta.

Comments are closed.