Ant-design: Select dropdown moves when scrolling

[Sokal21]

Version

2.13.10

Environment

browser version

Reproduction link

https://codepen.io/anon/pen/XzEdgJ

Steps to reproduce

Open the modal by clicking on show button, open the drop down and resize the display view till you can scroll on the view with the menu open, then scroll down or up.

What is expected?

The drop down options should stay at the bottom of the menu when scrolling

What is actually happening?

The drop down options are staying in a fixed position of the screen when scrolling up or down

[ddcat1115]

You can use getPopupContainer to change the parent node which the selector should be rendered to. demo

[ant-design-bot]

Hello @Sokal21, we use GitHub issues to trace bugs or discuss plans of Ant Design. So, please don't ask usage questions here. You can try to ask questions on Stack Overflow or Segment Fault, then apply tag antd and react to your question.

[jyothibetabulls]

Hi,
This is Ashok.
I am new for ant design.when i am designing the template i got some designing issues. ie i am designing select box dropdown options will be in fixed position.please check the below screen. i hope you understand my problem.

Thanks
Ashok

[justinlazaro-ubidy]

is this already fix?

[alexcambose]

Is this issue fixed ?

[Driggs88]

add this Select Props getPopupContainer={trigger => trigger.parentNode}

[raymondjacobson]

fwiw -- make sure your parent is set (as Driggs calls out) and its position=relative.

[coskunuyar]

That solves the problem but causes rendering problem on internet explorer 11. Is there any one who has a solution ? Maybe you can say that it is because of console.log usage in app that causes this kind of problems but I used polyfill for console.log no effect.

[bishnu476]

For not making the menu fixed while scrolling
Use Dropdown Props
getPopupContainer={() => document.getElementById('id_of_dropdown_container') || document.body}
and in css file place
#id_of_dropdown_container .ant-dropdown-placement-topCenter {
position: fixed;
}

[rahuls360]

If you are trying to fix this globally read about https://ant.design/components/config-provider/

Found the solution #3487 by @afc163
Be cautious. You may need to recheck if your styling works as expected after the change. It broke few styles for me.

[harirahman]

Change Like this

      <div>
          <Select
            defaultValue="Select"
            style={{ width: 120 }}
            getPopupContainer={trigger => trigger.parentNode}
          >
            {plants.items &&
              plants.items.map((plant) => (
                <option key={plant.plant_id} value={plant.plant_id}>
                  {plant.plant_name}
                </option>
              ))}
          </Select>
          </div>