Hi guys,
So I’m working on this project to split expenses. In the top right corner of header, I have placed a three vertical dots element. Clicking on that opens a small modal window. I’m finding it difficult to position the modal window so that the top right edge of the window always originates from the three vertical dots irrespective of the screen width.
here’s is the link to the app: https://stackblitz.com/edit/godutch-app
Thanks in advance guys! 
Hey there!
If you want to position something relative to another object, then the easiest way is to structure your HTML in a way that makes it possible to do that. In this situation, position: relative and position: absolute are your friends.
Here’s a simple example that shows how the both are used.
Typically, the element you want positioned should have a position: absolute along with the top/bottom/left/right you desire. Once you declare this, it will position itself according to the nearest ancestor that is positioned. If there is no parent that is relatively positioned, it will position itself according to the body and will move along with the page scrolling.
So, to get back to your code - if you could make the modal div a child element of either header__dots or header, it would be easier for you to position it. Here is an example of how I positioned the modal in your code by shifting some things around in the DOM:
Here’s what I did:
header__dots divposition: relative to header__dots
Hope this makes sense! All the best 
This makes sense. I was trying to use display flex property to somehow change it’s direction and then play around the margin and padding but now realized it’s a bad way to go about it.
Making the modal children of dots would be a much better option. Thank you for your help!
Hi,
The approach you shared worked perfectly when I’m using divs but when I use Material UI Dialog component, things go south. Now the dialog element is the direct child of body and it makes it difficult to position such that it always originates from the 3 dots element.
Here is the link: https://stackblitz.com/edit/godutch-app
Any thoughts?
Hmm 
I’m assuming there is no way to move the Material UI Dialog component within the .HeaderComp-header-1 class?
I tried but when the app renders, irrespective of where one keeps the dialog component, it will be the direct child of body 
One thing to consider…Does this have to be a modal? You could do the same functionality you are looking for by making a dropdown with just a div. Maybe Material UI has a dropdown component you can use.
Modals are typically designed to be the “center of attention” so that’s probably what Google was thinking when they developed it to drop in at the end, not considering the use case of wanting to reposition it.
That’s actually a great idea. I can try the menu component for the threeDots icon and filter icon.
But if you look at the hamburger icon, I’d need a modal because the content ask for it. In that case, modal is imperative.
Not sure I understand what you mean by “the content asks for it.” Could you clarify?
Have you looked into using the Navigation Drawer so you can avoid the modal for the hamburger icon?
So the modal window which expands when one clicks on hamburger icon has photo, background image, text etc and so I can’t use the menu itwms component as is the case with threeDots icon. That’s what I meant 
MUI drawer look promising. I’ll check it out if it allows me to add everything that I need.
I should have looked more closely at the mui docs 
Thank you so much!!
You’re welcome! Glad to share