Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxFlyout.Position Property

Specifies how to position the flyout window.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public FlyoutPosition Position { get; set; }

#Property Value

Type Description
FlyoutPosition

The window position.

Available values:

Show 13 items
Name Description Image
Auto

Displays the flyout window at the most suitable position determined by the Flyout component.

TopStart

Displays the flyout window at the top edge of the target element aligned to the left element edge.

Top Start Position

Top

Displays the flyout window at the top edge of the target element centered horizontally.

Top Position

TopEnd

Displays the flyout window at the top edge of the target element aligned to the right element edge.

Top End Position

RightStart

Displays the flyout window at the right edge of the target element aligned to the top element edge.

Right Start Position

Right

Displays the flyout window at the right edge of the target element centered vertically.

Right Position

RightEnd

Displays the flyout window at the right edge of the target element aligned to the bottom element edge.

Right End Position

BottomStart

Displays the flyout window at the bottom edge of the target element aligned to the left element edge.

Bottom Start Position

Bottom

Displays the flyout window at the bottom edge of the target element centered horizontally.

Bottom Position

BottomEnd

Displays the flyout window at the bottom edge of the target element aligned to the right element edge.

Bottom End Position

LeftStart

Displays the flyout window at the left edge of the target element aligned to the top element edge.

Left Start Position

Left

Displays the flyout window at the left edge of the target element centered vertically.

Left Position

LeftEnd

Displays the flyout window at the left edge of the target element aligned to the bottom element edge.

Left End Position

#Remarks

Use the Position property to specify the flyout window position relative to the target element (PositionTarget or PositionRectangle).

Run Demo: Flyout - Placement

Razor
<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;
}

Blazor Flyout Offsets

You can list the allowed positions. In this case, the Flyout component determines the most suitable window position among the specified positions.

Razor
<DxFlyout Position=@(FlyoutPosition.BottomStart | FlyoutPosition.TopStart) ... />

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

See Also