DxFlyout.FitToRestriction Property

Specifies whether the flyout window can overlap restriction boundaries.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool FitToRestriction { get; set; }

Property Value

Type	Default	Description
Boolean	true	true to make the flyout window fit restriction boundaries; false to allow the flyout window to overlap the boundaries.

Remarks

Run Demo: DropDown - Automatic Position Adjustment

<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 style="font-size: 0.75rem">@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;
@* ... *@
}