DxDropDown.PositionMode Property

Specifies how to position the drop-down window.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public DropDownPositionMode PositionMode { get; set; }

Property Value

Type	Description
DropDownPositionMode	A DropDownPositionMode enumeration value.

Available values:

Show 11 items

Name	Description	Image
Absolute	Displays the drop-down window at the top left corner of the browser window and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the restricted edge overlaps the DropDown, the component aligns with the edge.
Relative	Displays the drop-down window at the upper-left corner of the target element (PositionTarget or PositionRectangle) and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the restricted edge overlaps the DropDown, the component aligns with the edge.
Bottom	Displays the drop-down window at the bottom edge of the target element (PositionTarget or PositionRectangle) and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the specified edge overlaps the DropDown, the component is displayed at the opposite side of the target element.
Center	Displays the drop-down window in the center of the target element (PositionTarget or PositionRectangle) and at an offset defined by the HorizontalOffset and VerticalOffset property values.
Right	Displays the drop-down window at the right edge of the target element (PositionTarget or PositionRectangle) and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the specified edge overlaps the DropDown, the component is displayed at the opposite side of the target element.
AbsolutePoint	Displays the drop-down window at the top left corner of the browser window and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the restricted edge overlaps the DropDown, the component is displayed in the opposite direction from the axis defined by the offset properties.
RelativePoint	Displays the drop-down window at the upper-left corner of the target element (PositionTarget or PositionRectangle) and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the restricted edge overlaps the DropDown, the component is displayed in the opposite direction from the axis defined by the offset properties.
Mouse	Displays the drop-down window at the mouse pointer position and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the restricted edge overlaps the DropDown, the component aligns with the edge.
MousePoint	Displays the drop-down window at the mouse pointer position and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the restricted edge overlaps the DropDown, the component is displayed in the opposite direction from the axis defined by the offset properties.
Left	Displays the drop-down window at the left edge of the target element (PositionTarget or PositionRectangle) and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the specified edge overlaps the DropDown, the component is displayed at the opposite side of the target element.
Top	Displays the drop-down window at the top edge of the target element (PositionTarget or PositionRectangle) and at an offset defined by the HorizontalOffset and VerticalOffset property values. If the specified edge overlaps the DropDown, the component is displayed at the opposite side of the target element.

Remarks

Use the PositionMode property to specify the drop-down window position relative to the target element (PositionTarget or PositionRectangle). The position takes into account the offset specified by the HorizontalOffset and VerticalOffset property values.

<DxButton Id="showDDbtton" Click="() => IsOpen = true">Show a drop-down window</DxButton>
<DxDropDown PositionTarget="#showDDbtton"
            PositionMode="DropDownPositionMode.Bottom"
            HorizontalOffset="120"
            VerticalOffset="70"
            Width="210px"
            BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            @bind-IsOpen="@IsOpen">
</DxDropDown>

@code {
    bool IsOpen { get; set; } = false;
}