ConfirmPopup arrow and position wrong when not enough space to the right or bottom

[pablopaz]

Describe the bug

When there is not enough space to the right of the element to fit the popup, the arrow does not point to the target. When there is not enough space to the bottom, the popup is not well positioned.

Additionally, when using a single <p-confirm-popup /> component, when clicking another button with a popup open, it does not close the previous and instead shows the new popup in the same position as the previous. I would expect it to close the previous and show the new popup relative to the new target.

Pull Request Link

No response

Reason for not contributing a PR

• [X] Lack of time
• [ ] Unsure how to implement the fix/feature
• [ ] Difficulty understanding the codebase
• [ ] Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-zfsdrqay?file=src%2Fapp%2Fapp.component.html

Environment

Windows

Angular version

19.0.5

PrimeNG version

v19

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

See stackblitz demo.

Expected behavior

The arrow should point to the target element and the popup should be positioned over the target with the arrow pointing down when there is not space to the bottom.

[github-actions[bot]]

Due to PrimeTek's demanding roadmap for PrimeNG, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[marianmuresan]

For those who wants a quick fix:

// arrow alignment for confirmation popup
.p-confirm-popup-flipped:after,
.p-confirm-popup-flipped:before {
    bottom: auto !important;
    top: 100% !important;
}

.p-confirm-popup-flipped:after {
    border-bottom-color: transparent !important;
    border-top-color: var(--p-confirmpopup-border-color) !important;
}

.p-confirm-popup-flipped:before {
    border-bottom-color: transparent !important;
    border-top-color: var(--p-confirmpopup-border-color) !important;
}

.p-confirm-popup-flipped {
    margin-top: calc(var(--p-confirmpopup-gutter) * -1) !important;
    margin-bottom: var(--p-confirmpopup-gutter) !important;
}

.p-confirmpopup:after,
.p-confirmpopup:before {
    left: calc(var(--overlayArrowLeft) + var(--p-confirmpopup-arrow-offset)) !important;
}

The css is as p-confirmpopup-flipped but the class added is p-confirm-popup-flipped, and the left attribute does not accounts for overlayArrowLeft.

[cskiwi]

For those who wants a quick fix:

// arrow alignment for confirmation popup .p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before { bottom: auto !important; top: 100% !important; }

.p-confirm-popup-flipped:after { border-bottom-color: transparent !important; border-top-color: var(--p-confirmpopup-border-color) !important; }

.p-confirm-popup-flipped:before { border-bottom-color: transparent !important; border-top-color: var(--p-confirmpopup-border-color) !important; }

.p-confirm-popup-flipped { margin-top: calc(var(--p-confirmpopup-gutter) * -1) !important; margin-bottom: var(--p-confirmpopup-gutter) !important; }

.p-confirmpopup:after, .p-confirmpopup:before { left: calc(var(--overlayArrowLeft) + var(--p-confirmpopup-arrow-offset)) !important; } The css is as p-confirmpopup-flipped but the class added is p-confirm-popup-flipped, and the left attribute does not accounts for overlayArrowLeft.

Thanks for the fix, however I had to do left: calc(var(--overlayArrowLeft) - var(--p-confirmpopup-arrow-offset)) !important;

so - the offset :) otherwise it would overshoot

[AbdealiLoKo]

I am currently facing the same issue with the latest primeng There seems to be a open PR - I have tested that in my local it seems to work Anything else I can do to help with the PR merging - testing or so?