Bug 1903196 - Popover positioning is misaligned for Overview Dashboard status items
Summary: Popover positioning is misaligned for Overview Dashboard status items
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 4.7
Hardware: Unspecified
OS: Unspecified
Target Milestone: ---
: 4.7.0
Assignee: Yadan Pei
QA Contact: Yadan Pei
Depends On:
TreeView+ depends on / blocked
Reported: 2020-12-01 15:45 UTC by Steve Goodwin
Modified: 2021-02-24 15:37 UTC (History)
2 users (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Last Closed: 2021-02-24 15:37:08 UTC
Target Upstream Version:

Attachments (Terms of Use)
Control plane popover misalignment (53.50 KB, image/png)
2020-12-01 16:39 UTC, Steve Goodwin
no flags Details
Control Plane status popover displayed on top (121.14 KB, image/png)
2020-12-09 10:32 UTC, Yadan Pei
no flags Details
Operator status popover displayed on top (105.63 KB, image/png)
2020-12-09 10:37 UTC, Yadan Pei
no flags Details

System ID Private Priority Status Summary Last Updated
Github openshift console pull 7395 0 None closed Bug 1903196: Position Overview status popovers to display on top 2020-12-07 10:08:34 UTC
Red Hat Product Errata RHSA-2020:5633 0 None None None 2021-02-24 15:37:38 UTC

Description Steve Goodwin 2020-12-01 15:45:39 UTC
Description of problem:
Popover arrows that are positioned to the right are not vertically aligned with dashboard status items. 

Additional info:
The pf-c-popover receives an inline positioning calculation that recalculates correctly once page scrolled.
These popovers look to have loading content upon initial display that causes the container height to increase, which possibly is the reason the initial pf-c-popover position calculation is incorrect.

Expected results:
Popover container arrow should be positioned next to the status item.

Comment 1 Steve Goodwin 2020-12-01 16:39:46 UTC
Created attachment 1735307 [details]
Control plane popover misalignment

Comment 2 Steve Goodwin 2020-12-01 21:12:07 UTC
Related info:
The Popover component uses Popper.js "positioning engine" for positioning. 

Per https://popper.js.org/docs/v2/modifiers/event-listeners/
"The eventListeners modifier adds scroll and resize listeners that update the position of the popper when necessary. These are not exhaustive and don't cover the following cases:
When the reference element moves or changes size.
When the popper element changes size (i.e. content).
Manually updating the instance via instance.update(), a ResizeObserver or requestAnimationFrame loop (if animating) can solve these if necessary."

Comment 4 Yadan Pei 2020-12-09 10:32:54 UTC
Created attachment 1737870 [details]
Control Plane status popover displayed on top

Comment 5 Yadan Pei 2020-12-09 10:37:44 UTC
Created attachment 1737871 [details]
Operator status popover displayed on top

Overview Status popover is displayed on top and arrows are vertically aligned

Verified on 4.7.0-0.nightly-2020-12-08-141245

Comment 8 errata-xmlrpc 2021-02-24 15:37:08 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory (Moderate: OpenShift Container Platform 4.7.0 security, bug fix, and enhancement update), and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.


Note You need to log in before you can comment on or make changes to this bug.