Internal issue 2940 - IcPopoverMenu - Menu rendering too far above anchor element within IcDataTable
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
Note: Screenshots and Stackblitz provided on internal ticket
We've been experiencing some strange behaviour with our IcPopovers which have been integrated into an IcDataTable. This specifically occurs when the IcDataTable has few rows / is close to the end of the viewport.
Standard Popover behaviour is fine; the Popover renders down and associated with its anchor element as expected (anchor circled).
For another Popover, whose anchor is close to the bottom of the viewport, the Popover cannot render beneath the anchor and instead renders upwards (as is expected behaviour). But for some reason, it renders with a much greater offset.
I've verified within the DOM that the anchor element is being set correctly. It seems a larger than usual transformation style is being applied to the Popover in this circumstance.
Contributor guide
Research direction
Start by reproducing IcPopoverMenu inside IcDataTable with few rows near the bottom of the viewport, using the Stackblitz and screenshots from the internal ticket. Inspect the positioning and transformation applied when the menu opens upward. Done means the popover remains correctly aligned with its anchor in both downward- and upward-opening cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100