codastic/react-positioning-portal

Portal not visible if that part of the parent div is not visible.

Opened this issue · 5 comments

ddfridley commented

Thank you for this component. I have a problem/feature request:

Problem:

If the calculated position for the portal is in an area of the parent div that is not visible, the portal is not visible.

Duplication:

  1. Run the scrollable test: https://codastic.github.io/react-positioning-portal/?path=/story/example-tooltip--scrollable-test
  2. Move your window to the right so that the right edge, up to the button is not visible:
image
  1. Hover over the button
  2. Observe that the portal can not be seen

Desired Solution:

Consider what's visible in the positioning strategy and, in this case, put the portal on the left of the button instead, and in general find a way to make it visible.

webholics commented

Thanks for your feedback. I will look into it.

webholics commented

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.

ddfridley commented

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

ddfridley commented

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

webholics commented

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.