Position react-modal relative to an element in the background

Question

I have an input box in my main App element (id= "inputBox") and a react-modal that pops up when some input is given to this input box(via onChange event).

I want to position the react-modal just below this input box when it pops open but am being unable to do so.

I have so far only been able to position it relative to the viewport by calculating the offset of the input box and accordingly setting the style.top/style.left of the modal overlay. But this is causing some other problems,so I need to be able to set the position relative to the input box.

Any suggestions on how to do this will be highly appreciated.

@JonasW.Hi.I tried that,but that did not have any effect. I put the just below the element in the DOM,but that does render below — , Jun 19 '18 at 09:32

score 0 · Answer 1 · answered Jun 19 '18 at 09:36

I think you're creating something like a search dropdown where some results appear on users search query. The most simple solution I can think of is to create a new component and include the popup inside that so it will be relative to it no matter what.

Your component will need to have its own state

Position react-modal relative to an element in the background

1 Answers1