Description
Bug, feature request, or proposal:
Overlay-connected-position strategy should have an option to push the contents into the screen.
Overlay-connected-position strategy allows setting something like "put the overlay element horizontally centered", so you could have something like this:
________________
| |
| o |
| ^ |
| ███ |
|________________|
This is nice, but there is one problem, what if the element is in a position where no matter where you put the overlay contents, they will always be rendered off the screen?
________________
| |
| o |
| ^ |
| ████████████|██
|________________|
What is the expected behavior?
Given an option in the connected-position-strategy, push the element into the screen by the largest amount of pixels that it goes off-screen. For example:
- If it goes 20px off screen to the right but there are 50px available to the left before going off screen again, then push it by 20px.
- If it goes 10px off screen to the right but there are only 5px available to the left before going off screen again, then push it by 5px.
- If it goes 10px off screen to the right but there are is already 20px offscreen to the left, then do nothing.
________________
| |
| o |
| ^ |
| ███████████████|
|________________|
What is the current behavior?
The position strategy gets the amount of pixels that it goes off-screen, and subtracts them from the overlay contents to get the "visible pixels", then multiplies HxW to get the area and selects the position with the largest visible area from the list of fallback positions even if it renders off screen.
What is the use-case or motivation for changing an existing behavior?
Tooltip-like components that render on hover or focus will render after the element. Normally this is not an issue on desktops or tablets because there is a lot of space, but on tiny phones like an iPhone4, this doesn't look good.
Note that we can't use tooltips because we want buttons, links, and other stuff.