DxDropDown.PositionMode Property
Specifies how to position the drop-down window.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
[Parameter]
public DropDownPositionMode PositionMode { get; set; }
#Property Value
Type | Description |
---|---|
Drop |
A Drop |
Available values:
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 Horizontal |
|
Relative | Displays the drop-down window at the upper-left corner of the target element (Position |
|
Bottom | Displays the drop-down window at the bottom edge of the target element (Position |
|
Center | Displays the drop-down window in the center of the target element (Position |
|
Right | Displays the drop-down window at the right edge of the target element (Position |
|
Absolute |
Displays the drop-down window at the top left corner of the browser window and at an offset defined by the Horizontal |
|
Relative |
Displays the drop-down window at the upper-left corner of the target element (Position |
|
Mouse | Displays the drop-down window at the mouse pointer position and at an offset defined by the Horizontal |
|
Mouse |
Displays the drop-down window at the mouse pointer position and at an offset defined by the Horizontal |
|
Left | Displays the drop-down window at the left edge of the target element (Position |
|
Top | Displays the drop-down window at the top edge of the target element (Position |
#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;
}