CODEWITHSUNDEEP
reactjsdatetimepickerantd
Oleksandr Fomin
Oleksandr Fomin

Reputation: 2356

Ant Design TimePickers scrolls with the page

I'm using antd TimePicker when I open it and scroll down, the popover scrolls with the page instead of staying in place. I cant figure out why their official solution for the scrolling problem isn't working for me https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page

Here is my code:

    <div className="timepicker__wrapper">
      <span className="timepicker__mintime-label">
        {getTranslate(QUESTION_MODULE.GENERAL.MINIMUM_TIME_LABEL)}
      </span>
      <TimePicker
        getPopupContainer={triggerNode => triggerNode.parentNode}
        onChange={onChangeMinTime}
        format={timeFormat}
        defaultValue={moment(item.minTime ?? '00:00', timeFormat)}
        allowClear={false}
       
      />
    </div>

If I console.log triggerNode.parentNode it points to the timepicker__wrapper exactly as it should. Here you can see the anchor node

enter image description here

Upvotes: 2

Views: 1620

Answers (1)

Oleksandr Fomin
Oleksandr Fomin

Reputation: 2356

I solved this issue by adding position: relative to the anchor node. It would be nice to mention this in the docs

Upvotes: 1

Related Questions