Skip to main content

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.

Relative Position

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.

Bottom Position

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.

Center Position

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.

Right Position

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.

Relative Position

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.

Mouse Position

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.

Mouse Position

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.

Left Position

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.

Top Position

Related API Members

The following properties accept/return DropDownPositionMode values:

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

Blazor DropDown Offsets

See Also