Skip to main content
All docs
V26.1
  • DropDownRestrictionMode Enum

    Lists values that specify an element that restricts the DropDown position.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v26.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public enum DropDownRestrictionMode

    Members

    Name Description
    Viewport

    The drop-down window position is restricted by the viewport.

    Page

    The drop-down window position is restricted by the page.

    Rectangle

    The drop-down window position is restricted by a rectangle’s boundaries (RestrictionRectangle).

    TargetElement

    The drop-down window position is restricted by a target element’s boundaries (RestrictionTarget).

    Related API Members

    The following properties accept/return DropDownRestrictionMode values:

    Remarks

    Set the RestrictionMode property to one of the DropDownRestrictionMode enumeration values to restrict the DropDown position.

    Run Demo: DropDown - Automatic Position Adjustment

    <OptionsContent>
        <OptionComboBox Label="Close mode:" CssClass="ow-100" Data="@CloseModeSource" @bind-Value="@CloseMode"/>
        <OptionCheckBox Label="Fit to container:" @bind-Checked="FitToRestriction"/>
    </OptionsContent>
    <ChildContent>
        <div class="@(IsMobile ? "" : "card") flipping-overflow-container">
            <DxButton CssClass="flipping-button" Click="() => IsOpen = true">SHOW A DROPDOWN</DxButton>
            <DxDropDown
                @bind-IsOpen="@IsOpen"
                CloseOnOutsideClick="false"
                PositionMode="DropDownPositionMode.Bottom"
                PositionTarget=".flipping-button"
                RestrictionTarget=".flipping-overflow-container"
                RestrictionMode="DropDownRestrictionMode.TargetElement"
                CloseMode="@CloseMode"
                FitToRestriction="@FitToRestriction"
                Width="240">
                <span class="fs-75">@Constants.ContentShort</span>
            </DxDropDown>
        </div>
    </ChildContent>
    
    @code {
    @* ... *@
        bool IsOpen { get; set; } = false;
        bool IsMobile { get; set; }
        bool FitToRestriction { get; set; } = true;
        DropDownCloseMode[] CloseModeSource { get; } = Enum.GetValues<DropDownCloseMode>();
        DropDownCloseMode CloseMode { get; set; } = DropDownCloseMode.Hide;
        @* ... *@
    }
    
    See Also