From 7b8ec4ff9b1ef0c7196260cb726b3cb7d0515d63 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 21 Nov 2025 14:59:33 +0200
Subject: [PATCH] kb(Popover): Refresh Popover posiiton on dimensions change

---
 components/popover/position-collision.md      |  4 +
 .../popover-refresh-callout-position.md       | 83 +++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 knowledge-base/popover-refresh-callout-position.md

diff --git a/components/popover/position-collision.md b/components/popover/position-collision.md
index b7257bb4a3..1d8ad4a2b8 100644
--- a/components/popover/position-collision.md
+++ b/components/popover/position-collision.md
@@ -105,3 +105,7 @@ The following example lets you experiment with the available settings that contr
     }
 </style>
 ````
+
+## See Also
+
+* [How to Align Popover with Anchor After Content and Size Change](slug:popover-kb-refresh-callout-position)
diff --git a/knowledge-base/popover-refresh-callout-position.md b/knowledge-base/popover-refresh-callout-position.md
new file mode 100644
index 0000000000..2be60171bc
--- /dev/null
+++ b/knowledge-base/popover-refresh-callout-position.md
@@ -0,0 +1,83 @@
+---
+title: Align Popover with Anchor After Content and Size Change
+description: Learn how to align the Telerik Popover for Blazor to its anchor after the component content and size change dynamically at runtime.
+type: troubleshooting
+page_title: How to Align Popover with Anchor After Content and Size Change
+slug: popover-kb-refresh-callout-position
+tags: blazor, popover
+ticketid: 1703828
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Popover for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+I have a Popover that may change its content and size at runtime. In these cases, the callout does not line up with the anchor anymore. How to dynamically align the Popover with its anchor after the content shrinks or expands?
+
+## Cause
+
+The Popover component does not track changes to its content or size for performance reasons.
+
+## Solution
+
+Use the [Popover `Refresh` method](slug:popover-overview#popover-reference-and-methods) to recalculate the component and callout position with regard to the anchor. If the Popover content change depends on C# code, you may need to wait for the next Blazor re-render or trigger it immediately with `await Task.Delay(1)`.
+
+>caption Refresh Popover position and callout when the dimensions change
+
+```RAZOR
+<TelerikPopover @ref="@PopoverRef"
+                AnchorSelector=".popover-target"
+                ShowOn="@PopoverShowOn.Click"
+                Position="@PopoverPosition.Right"
+                Offset="20">
+    <PopoverContent>
+        Telerik Popover for Blazor
+        <br />
+        <TelerikButton OnClick="@ToggleContent">Toggle Content</TelerikButton>
+        @if (ContentVisible)
+        {
+            <div style="height: 100px; padding: 1em; border: 1px solid var(--kendo-color-border);">
+                Some dynamic content...
+            </div>
+        }
+    </PopoverContent>
+    <PopoverActions>
+        <TelerikButton OnClick="@( () => PopoverRef?.Hide() )"
+                       Icon="@SvgIcon.X">Close</TelerikButton>
+    </PopoverActions>
+</TelerikPopover>
+
+<br /><br /><br /><br /><br /><br /><br />
+
+<TelerikButton Class="popover-target">Toggle Popover</TelerikButton>
+
+@code{
+    #nullable enable
+
+    private TelerikPopover? PopoverRef { get; set; }
+
+    private bool ContentVisible { get; set; } = true;
+
+    private async Task ToggleContent()
+    {
+        ContentVisible = !ContentVisible;
+        await Task.Delay(1);
+
+        PopoverRef?.Refresh();
+    }
+}
+```
+
+## See Also
+
+* [Popover Position and Collision](slug:popover-position-collision)