Skip to content

Popover arrow can be incorrectly positioned if the popover shifts in the x-axis #2018

Description

@acelaya

We recently implemented support to display an arrow in the Popover, that points to the anchor element.

The implementation was very simplistic/naive: assuming the popover will align to the right or left of the anchor element, we set the arrow in the same side with a small gap.

Image

Image

However, if the space available in the viewport between the anchor and the side to which the Popover is expanding is too narrow to contain the Popover, we shift it in the x-axis to ensure there's no horizontal scroll. This can cause the arrow to no longer point to the anchor element due to its "static" position.

Image

We could do a couple things:

  1. More dynamically calculate the position of the arrow, so that it always points to the "center" of the anchor.
  2. Reduce the max size of the popover so that it never shifts (this could be conditional if we want). We already cap the size of the popover to the size of the viewport, so we could reduce it even more.

2 might introduce some regression, or produce not obvious differences in behaviors, so it probably makes more sense to go with 1.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions