blazor-devexpress-dot-blazor-58ee13ae.md
Lists values that specify an element that restricts the Flyout position.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public enum FlyoutRestrictionMode
| 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).
|
The following properties accept/return FlyoutRestrictionMode values:
Set the RestrictionMode property to one of the FlyoutRestrictionMode enumeration values to restrict the Flyout position.
Run Demo: Flyout - Automatic Position Adjustment
<DxButton
CssClass="flipping-button"
RenderStyle="@ButtonRenderStyle.Secondary"
Click="() => IsOpen = !IsOpen"
aria-describedby="flyout-flipping">SHOW A FLYOUT</DxButton>
@* ... *@
<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>
@* ... *@
@code {
[Inject]
IEnvironmentInfo EnvironmentInfo { get; set; }
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;
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
await EnvironmentInfo.InitializeRuntime();
var deviceInfo = await EnvironmentInfo.DeviceInfo;
IsMobile = deviceInfo.IsMobileDevice;
}
await base.OnAfterRenderAsync(firstRender);
}
}
See Also