CODEWITHSUNDEEP
javascriptreactjsdatepickerantd
Hello World
Hello World

Reputation: 144

Prevent date picker from scrolling with page

I am making a react app which has datepicker made up of antd

Simple index.js code:

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 />
      <div style={{ minHeight: 500 }}></div>
    </div>
  </div>,
  document.getElementById("root")
);

Working Example:

Edit antd reproduction template (forked)

To Reproduce: If user clicks on the input, datepicker displayed but when we try to scroll down, the datepicker also get scrolled along with the page.

Expected Result: Datepicker should not get scrolled and it needs to be under the input box.

Any help would be highly appreciable. Thanks in advance.

Upvotes: 1

Views: 5670

Answers (1)

Tomas
Tomas

Reputation: 146

This is described in their FAQ: https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page?

  1. Add position: "relative" to the parent element.
  2. Add getPopupContainer={trigger => trigger.parentElement} to your DatePicker.

Edit antd reproduction template (forked)

Upvotes: 1

Related Questions