DxFlyout.RestrictionMode Property

Specifies an element that restricts the Flyout component position.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[Parameter]
public FlyoutRestrictionMode RestrictionMode { get; set; }

Property Value

Type	Description
FlyoutRestrictionMode

A restriction mode.

Available values:

Name	Description
Viewport

The Flyout position is restricted by the viewport.

| | Page |

The Flyout position is restricted by the page.

| | Rectangle |

The Flyout position is restricted by a rectangle’s boundaries (RestrictionRectangle).

| | TargetElement |

The Flyout position is restricted by a target element’s boundaries (RestrictionTarget).

Remarks

The Flyout component changes its position when certain page elements are changed (for instance, when the page is scrolled or resized). Use the RestrictionMode property to restrict flyout window movement.

Run Demo: Flyout - Automatic Position Adjustment

razor

<OptionsContent>
    <OptionComboBox Label="Close mode:" CssClass="ow-100" Data="@CloseModes" @bind-Value="@CloseMode"/>
    <OptionCheckBox Label="Fit to container" @bind-Checked="FitToRestriction"/>
</OptionsContent>
<ChildContentWithParameters Context="Params">
    <div class="@(IsMobile ? "" : "card") flipping-overflow-container">
        <dxbl-demo-scrollable center-horizontally center-vertically id="flipping-target-container" class="flipping-overflow-content">
            <DxButton
                CssClass="flipping-button"
                RenderStyle="@ButtonRenderStyle.Secondary"
                Click="() => IsOpen = !IsOpen"
                aria-describedby="flyout-flipping">SHOW A FLYOUT</DxButton>
        </dxbl-demo-scrollable>
        <DxFlyout
            @bind-IsOpen=IsOpen
            Id="flyout-flipping"
            PositionTarget=".flipping-button"
            RestrictionTarget=".flipping-overflow-container"
            RestrictionMode="FlyoutRestrictionMode.TargetElement"
            CloseOnOutsideClick="false"
            PreventCloseOnPositionTargetClick="true"
            CloseMode="@CloseMode"
            FitToRestriction="@FitToRestriction"
            SizeMode="Params.SizeMode"
            Width="240">
            <span class="fs-75">@Constants.ContentShort</span>
        </DxFlyout>
    </div>
</ChildContentWithParameters>

@code {
@* ... *@
bool IsOpen { get; set; } = false;
bool IsMobile { get; set; }
bool FitToRestriction { get; set; }
FlyoutCloseMode[] CloseModes { get; } = Enum.GetValues<FlyoutCloseMode>();
FlyoutCloseMode CloseMode { get; set; } = FlyoutCloseMode.Hide;
@* ... *@
}