Evitar que el selector de fechas se desplace con la página.
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:
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.
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:
index.css
(o cualquier otro archivo CSS desde donde estés importando estilos). Por ejemplo:DatePicker
para agregar la nueva clase CSS:overflow
del div padre aauto
en lugar descroll
:¡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:
¡Espero que esto ayude! Avísame si tienes alguna pregunta.