Css - Cannot center the modal in Y-direction when the screen height is more than the viewport height in React even though I'm using position:fixed

HarshitMawandia
June 3, 2024
105 views
0 votes
2 Answers

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.

Screenshot

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

Answers

- DiegoAliendre
- June 3, 2024 at 5:02 pm
- 0 votes
0
You can set the parent element (element with black background) to have a fixed position and occupy the entire height of the viewport.
```
.parent {
   width: 100vw;
   height: 100vh;
   position: fixed;
   z-index: 2000;
   top: 0;
   left: 0;
   overflow: none;
   display: flex;
   align-items: center;
   justify-content: center;
}
```
Login or Signup to reply.

- Derek
- June 3, 2024 at 5:55 pm
- 0 votes
0
You are probably just putting your modal at top:0 and left:0 I would fix that by using the scrollY property of window.
```
<Modal className=`absolute top-[-${window.ScrollY}] ...restOfClasses` />
```
Notice how I put the value as a negative so it goes downwards instead of upwards.
Login or Signup to reply.