DropDownPositionMode Enum

Lists values used to position a drop-down window.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum DropDownPositionMode

Members

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.

Related API Members

The following properties accept/return DropDownPositionMode values:

• DxDropDown.PositionMode

Remarks

You can position a drop-down window relative to a target element (PositionTarget) or a Rectangle object (PositionRectangle). Use the PositionMode property to specify a drop-down window’s relative position.

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;
}