Skip to content

Popup positioned incorrectly (negative top) when scrollableContainer option is set — introduced in v5.2.0 #5052

Description

@galloween

Affected versions: 5.2.0+
Working versions: ≤ 5.1.0


Description

When scrollableContainer is set to a custom element (e.g. a wrapper div with position: relative), popups such as the link-edit popup render with an incorrect top value — typically a negative number that places the popup above the container's top edge instead of near the selection.


Root cause

In FroalaEditor.MODULES.position, the at(left, top, popup, height) function was changed in v5.2.0 to add a special case for position: relative containers:

// Step 1 — always runs:
t && (t -= c.offset().top)

// Step 2 — new in v5.2.0, runs when container is position:relative:
"relative" === c.css("position") && (
  o = (r = c.get(0)).getBoundingClientRect(),
  t = t && t - o.top + r.scrollTop
)

Both steps subtract the container's vertical position — offset().top (document-relative) and getBoundingClientRect().top (viewport-relative) — effectively double-subtracting and collapsing top to near zero.

v5.1.0 introduced the classList.contains("fr-toolbar") guard for the left offset (which is fine), but did not touch top.

v5.2.0 added the "relative" branch for top, which is the regression.


Fix

The t -= c.offset().top in Step 1 should be skipped (or Step 2 should be the only adjustment) for position: relative containers. The v4.x / v5.0.0 / v5.1.0 logic — a single t -= c.offset().top — was correct.

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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions