Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiPopover] Scrolling an open popover down stretches page height #6592

Closed
cqliu1 opened this issue Feb 10, 2023 · 4 comments
Closed

[EuiPopover] Scrolling an open popover down stretches page height #6592

cqliu1 opened this issue Feb 10, 2023 · 4 comments
Labels
answered Issues answered by the EUI team - auto-closes open issues in 7 days if no follow-up response

Comments

@cqliu1
Copy link
Contributor

cqliu1 commented Feb 10, 2023 •
edited
Loading

This bug exists in Kibana as of 8.8.0. In elastic/kibana#145628, I isolated the scrolling on a dashboard to just the panel section, keeping the search/filter bar in view as you scroll down the dashboard. I noticed when I have an open popover with the repositionOnScroll flag on a panel lower on the dashboard and scroll it down out of view, it stretches the entire page's height and results in a double scrollbar with a white space below the panel section about the height of the popover. I didn't see this happening when I had a popover towards the top of the dashboard and scroll it up out of view.

Feb-10-2023 14-03-35
@cqliu1 cqliu1 added the bug label Feb 10, 2023
@JasonStoltz
Copy link
Member

Thanks for the issue, we will investigate.

@1Copenut
Copy link
Contributor

@cqliu1 The EUI team is able to recreate the issue you're seeing on a local build. We're continuing to investigate the root cause and will keep you updated.

@cee-chen
Copy link
Member

cee-chen commented Feb 15, 2023 •
edited
Loading

Hi @cqliu1 - the underlying issue is that EuiPopovers are portalled to the end of the document <body>, but what is actually scrolling in your Kibana dashboard is a separate .react-grid-layout scrolling div. repositionOnScroll is primarily intended to respond to window scrolling, and can behave unpredictably when the anchor to the scroll to is actually within something else.

Here are a few options you could consider as a solution:

  1. Reconfigure your dashboard DOM to not have a nested scrolling container, but instead allow the normal scrolling to occur on the <body>. You can accomplish this by:

    1. Not setting an overflow and height on your nested containers
    2. Making your filters/toolbars position: fixed or position: sticky
    3. Adding a margin-top or padding-top to offset the fixed filters/toolbars
    4. Note: This is a medium dev level of effort but is probably the most technically/semantically correct solution.

  2. Remove the repositionOnScroll prop, and instead add a scroll listener event that auto-closes the popover on scroll. (It's somewhat unlikely the consumer wants to return to the popover after they've scrolled away, although this is certainly a deliberate UX choice and may not always be the correct one). This is probably the lowest dev level of effort required.

  3. If you absolutely know for sure you do not want either popovers to close on scroll or to change your layout DOM structure, then another option is you can wait for us to implement a new API for this behavior (portalling EuiPopovers into your .react-grid-layout scrolling container and adjusting our positioning logic to calculate off this parent container instead of window). One note of caution about this is our roadmap is extremely full currently, so this would be a low priority feature request for us that we would have no timeline or ETA for.

Hope that helps, and let us know if you have any questions!

@cee-chen cee-chen mentioned this issue Feb 27, 2023
Open
@yctercero yctercero mentioned this issue Mar 30, 2023
Open
@cee-chen cee-chen added answered Issues answered by the EUI team - auto-closes open issues in 7 days if no follow-up response and removed bug labels Apr 10, 2023
@github-actions
Copy link

👋 This issue hasn't seen activity in 3 days, so we're automatically closing this issue as answered. Please leave a comment if that's not the case, or if you have any remaining questions or issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
answered Issues answered by the EUI team - auto-closes open issues in 7 days if no follow-up response
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cee-chen @1Copenut @JasonStoltz @cqliu1