I’m using React with Tailwind
I’m trying to center the modal in the screen in which the height of the body is more than that of viewport and I need the modal to be fixed at the center of the screen.
Here’s a link to the page
https://yla-frontend.vercel.app/account/profile
Click on edit name button after scrolling a bit, you get a dialog box, it always starts relatively from the top of the container even though the position is fixed.
Can someone please help
I’ve created a parent container which is fixed, with top and left 0 and width and height as 100vw and 100vh, and then inside this container I’ve tried to centre the modal inside this div.
The problem is that the parent container acts like it is positioned as absolute and moves to the top of the entire content and not on fixed on the screen. Thus scrolling with the rest of the content
2
Answers
You can set the parent element (element with black background) to have a fixed position and occupy the entire height of the viewport.
You are probably just putting your modal at
top:0
andleft:0
I would fix that by using the scrollY property of window.Notice how I put the value as a negative so it goes downwards instead of upwards.