Antdesign Select z-index problem with Portal

Question

I have something like this:

<Portal>
  <BigComponent>
     <Select options={[...]} />
  </BigComponent> 
</Portal>

The select options are created in a div next to the BigComponent one. The BigComponent div is absolutely positioned with a high z-index.

This makes it so that it covers the options of the dropdown. I can fix it in dev tools by giving position relative to the div that Antd creates and giving it a high z-index, but the problem is it has no selector so no way of targeting it.

Any fix?

nick · Accepted Answer · 2023-06-07 19:48:00Z

1

Found it! There's a prop getPopupContainer that takes a function which returns a selector, I just selected my BigComponent div and it works fine now :)

answered Jun 7, 2023 at 19:48

nick

3,3076 gold badges44 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tejasvi Kumar · Accepted Answer · 2024-09-30 11:49:49Z

1

<Select options={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]} getPopupContainer={() => document.getElementById('big-component') || document.body} // Fallback to document.body />

getPopupContainer. is prop in antd select to decide the component over which we have to show the popUpContainer

like here we use 'big-component'

edited Sep 30, 2024 at 11:49

answered Sep 30, 2024 at 7:54

Tejasvi Kumar

112 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Antdesign Select z-index problem with Portal

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related