DxDropDown.FitToRestriction Property

Specifies whether the DropDown can overlap restriction boundaries.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.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 DropDown fit restriction boundaries; false to allow the DropDown to overlap the boundaries.

Remarks

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>
@* ... *@
        <DxDropDown
            @bind-IsOpen="@IsOpen"
            Id="dropDown-flipping"
            CloseOnOutsideClick="false"
            PositionMode="DropDownPositionMode.Bottom"
            PositionTarget=".flipping-button"
            RestrictionTarget=".flipping-overflow-container"
            RestrictionMode="DropDownRestrictionMode.TargetElement"
            PreventCloseOnPositionTargetClick="true"
            CloseMode="@CloseMode"
            FitToRestriction="@FitToRestriction"
            FooterVisible="true"
            SizeMode="Params.SizeMode"
            Width="240">
            <BodyContentTemplate>
                <span class="fs-75">@Constants.ContentShort</span>
            </BodyContentTemplate>
            <FooterContentTemplate>
                <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Primary" Text="OK" Click="@context.CloseCallback" />
            </FooterContentTemplate>
        </DxDropDown>
        @* ... *@
@code {
@* ... *@
    DropDownCloseMode[] CloseModeSource { get; } = Enum.GetValues<DropDownCloseMode>();
    DropDownCloseMode CloseMode { get; set; } = DropDownCloseMode.Hide;
    @* ... *@
}