Portal not visible if that part of the parent div is not visible. about react-positioning-portal HOT 5 OPEN

Thanks for your feedback. I will look into it.

from react-positioning-portal.

If I understand your screenshot correctly your browser viewport is overflowing the monitor viewport on the right side. In other words the browser has been made larger than the space you have on your monitor. I don't think there is any way to handle this case with web standards. JS methods like getBoundingClientRect only give us the coordinates in relation to the browser viewport. Everything we do within JS and CSS basically is always related to the browser viewport not the operating system viewport.

from react-positioning-portal.

Thanks for looking at this.

The browser window is not larger than the monitor, just that the window has been moved to the right, so that some of it is off screen.

I admit I had to really search for it, but there is window.screen and window.screenLeft and window.screenTop that can be used to figure out if the window is off the screen. Also, in the case of Chrome, it is necessary to consider screen.availLeft and screen.availTop even though they are nonstandard - they are offsets so screenLeft-(screen.availLeft||0) and screenTop-(screen.availTop||0) are what you would have expected. Screen

from react-positioning-portal.

Or, maybe I am being to picky. It's just that it was one of my first test cases. Either way, I appreciate this code. We are using it in github.com/EnCiv/civil-pursuit

from react-positioning-portal.

Appreciate your feedback. Using screen would be an interesting take to solve this. I will look into it. However it could be tricky to calculate everything correctly in the positioning strategy e.g. when the browser is zoomed or with different screen pixel densities.

from react-positioning-portal.