From b17a65d98b5d48ad44f8a7a1ea81bb13eee88456 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Thu, 26 Nov 2020 08:55:22 +0300
Subject: [PATCH] Fixed #490 - OverlayPanel :before "indicator" needs dynamic
 placement

---
 src/components/overlaypanel/OverlayPanel.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 1b180c417..23c9c23a5 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -103,7 +103,16 @@ export default {
         alignOverlay() {
             DomHandler.absolutePosition(this.container, this.target);
 
-            if (DomHandler.getOffset(this.container).top < DomHandler.getOffset(this.target).top) {
+            const containerOffset = DomHandler.getOffset(this.container);
+            const targetOffset = DomHandler.getOffset(this.target);
+            let arrowLeft = 0;
+
+            if (containerOffset.left < targetOffset.left) {
+                arrowLeft = targetOffset.left - containerOffset.left;
+            }
+            this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
+
+            if (containerOffset.top < targetOffset.top) {
                 DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
             }
         },
@@ -223,7 +232,7 @@ export default {
 
 .p-overlaypanel:after, .p-overlaypanel:before {
 	bottom: 100%;
-	left: 1.25rem;
+	left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
 	content: " ";
 	height: 0;
 	width: 0;