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 } ```` + +## 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 + + + + + + + + +
ProductPopover for Blazor
+ +## 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 + + + Telerik Popover for Blazor +
+ Toggle Content + @if (ContentVisible) + { +
+ Some dynamic content... +
+ } +
+ + Close + +
+ +






+ +Toggle Popover + +@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)