DxFlyout.Position Property

Specifies how to position the flyout window.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[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 |

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

| | TopEnd |

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

| | RightStart |

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

| | Right |

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

| | RightEnd |

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

| | BottomStart |

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

| | Bottom |

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

| | BottomEnd |

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

| | LeftStart |

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

| | Left |

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

| | LeftEnd |

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

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

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.