Popup smartPosition disrespects style 'top' property when near bottom of view or element target #1304

New Issue

claunia · 2026-01-29T17:51:50Z

claunia commented

2026-01-29 17:51:50 +00:00

Originally created by @mayoismyfavoritespice on GitHub (Jul 22, 2024).

Describe the bug
If the size of the Popup component is determined to be near the bottom of the view, the openPopup function overrides the components' Style parameter for top.

if (smartPosition && top + rect.height > window.innerHeight && parentRect.top > rect.height) {
      top = parentRect.top - rect.height;

There does not seem to be anyway to change this behaviour where the Popup component is required to respect the parent components view position, even when the parent is near or intersects the bottom of the page view.

To Reproduce
Steps to reproduce the behavior:

Build sample project Run
scroll to a panel that is partially conceiled by bottom of browser
click the button, notice placement of popup versus cards that are not conceiled by bottom of browser

(attached zip of repo)

Expected behavior
The popup should respect the style "top" property being provided to the component

Screenshots
(see attached screen shot of example issue from repo)

Desktop

OS: Windows 11
Browser: Chrome
Version 126.0.6478.182 (Official Build) (64-bit)

Additional context
It would be nice to have the ability to pass along a parameter to enforce position information being feed by the style attribute of the Popup component along with the element reference ID.

ie:

//where the 2nd parameter disables
 the smartPosition method and uses left,top (or other placement fields from Popup component style property)
await PopupRef.ToggleAsync((ElementReference)PosRef, false);

PopupRep.zip

Originally created by @mayoismyfavoritespice on GitHub (Jul 22, 2024). **Describe the bug** If the size of the Popup component is determined to be near the bottom of the view, the openPopup function overrides the components' Style parameter for top. ``` if (smartPosition && top + rect.height > window.innerHeight && parentRect.top > rect.height) { top = parentRect.top - rect.height; ``` There does not seem to be anyway to change this behaviour where the Popup component is required to respect the parent components view position, even when the parent is near or intersects the bottom of the page view. **To Reproduce** Steps to reproduce the behavior: 1. Build sample project Run 2. scroll to a panel that is partially conceiled by bottom of browser 3. click the button, notice placement of popup versus cards that are not conceiled by bottom of browser (attached zip of repo) **Expected behavior** The popup should respect the style "top" property being provided to the component **Screenshots** (see attached screen shot of example issue from repo) **Desktop** - OS: Windows 11 - Browser: Chrome - Version 126.0.6478.182 (Official Build) (64-bit) **Additional context** It would be nice to have the ability to pass along a parameter to enforce position information being feed by the style attribute of the Popup component along with the element reference ID. ie: ``` //where the 2nd parameter disables the smartPosition method and uses left,top (or other placement fields from Popup component style property) await PopupRef.ToggleAsync((ElementReference)PosRef, false); ``` ![bottom-issue](https://github.com/user-attachments/assets/f4e58730-0832-4770-90e3-ac2a0389885b) [PopupRep.zip](https://github.com/user-attachments/files/16332501/PopupRep.zip)

claunia closed this issue

2026-01-29 17:51:51 +00:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1304