DxFlyout.PositionTarget Property

Specifies the UI element relative to the flyout window’s position.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string PositionTarget { get; set; }

Property Value

Type	Description
String	The CSS selector that identifies the target UI element.

Remarks

Use the PositionTarget property to specify the flyout window’s position relative to the target element. In the example below, the target element is defined by its id attribute:

<DxButton Id="show-flyout" Click="() => IsOpen = !IsOpen">Show a flyout window</DxButton>
<DxFlyout @bind-IsOpen="@IsOpen" Width="210"
            BodyText="Lorem ipsum dolor sit amet"
            PositionTarget="#show-flyout"
            Position="FlyoutPosition.BottomStart">
</DxFlyout>

@code {
    bool IsOpen { get; set; } = false;
}

The position takes into account the offset specified by the Offset and Distance property values.