Angular Common - Object Structures - positionConfig

The position object specifies the widget positioning options.

Type:

Object

This object is passed to the position configuration option of a widget that overlays the main screen (LoadPanel, Popup, Popover, and Toast).

The positionConfig object may contain the following fields: my, at, of, offset and collision. Look at the following sentence to see how to use these fields to position the required element against the target element.

"Place my 'left' side at the 'left bottom' corner of the '#targetElement'." The italic quoted phrase located after each option name within the sentence represents a value of the appropriate option.

at

The target element position that the widget is positioned against.

Type:

String

|

Object

Accepted Values: 'bottom' | 'center' | 'left' | 'left bottom' | 'left top' | 'right' | 'right bottom' | 'right top' | 'top'

The at option can take on an object containing the x and y fields, which specify horizontal and vertical position specifier respectively, or a string value consisting of horizontal and vertical position specifiers separated by a space (e.g., "left top"). The default value for each position specifier is "center". If you assign the "left" value to this option, it will be converted to the "left center" value.

JavaScript
position: { at: 'left bottom' };

When using a widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this option using the HorizontalAlignment and VerticalAlignment enums in the following manner.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Position(p => p
        .At(HorizontalAlignment.Right, VerticalAlignment.Bottom)
    )
)
@(Html.DevExtreme().WidgetName() _
    .Position(Sub(p)
        p.At(HorizontalAlignment.Right, VerticalAlignment.Bottom)
    End Sub)
)

boundary

The element within which the widget is positioned.

All collisions are computed against the element passed to this option. By default, widgets use the window object as a boundary element.

boundaryOffset

Specifies the horizontal and vertical offset from the window's boundaries.

Type:

String

|

Object

This option is used to resolve collisions. If the specified offset from the specified target leads to a collision with the window's boundary, the boundaryOffset value is used to position the element near the place of collision.

This option accepts an object containing the x and y fields which specify horizontal and vertical offset respectively, or a string in the following format: "5 -10", where the first number is a horizontal offset and the second number is a vertical offset in pixels.

When you configure a widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, this option accepts two values of the double type.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Position(p => p
        .BoundaryOffset(5, -10)
    )
)
@(Html.DevExtreme().WidgetName() _
    .Position(Sub(p)
        p.BoundaryOffset(5, -10)
    End Sub)
)

collision

Specifies how to move the widget if it overflows the screen.

Type:

String

|

Object

Accepted Values: 'fit' | 'fit flip' | 'fit flipfit' | 'fit none' | 'flip' | 'flip fit' | 'flip none' | 'flipfit' | 'flipfit fit' | 'flipfit none' | 'none' | 'none fit' | 'none flip' | 'none flipfit'

A string passed to this option should contain a collision handler name, or a pair of names separated by space. If the string consists of a single collision handler name, it is applied to both horizontal and vertical axes. If you pass a pair of names separated by space, the first collision handler will be applied to the horizontal axis, the second to the vertical axis.

JavaScript
// a string containing horizontal and vertical
// collision handlers separated by space
collision: "flip fit";

You can also specify different collision handlers for horizontal and vertical axes in one of the following ways.

JavaScript
// an object containing 'x' and 'y' fields
collision: {
    x: "flip", // horizontal collision handler
    y: "none" // vertical collision handler
}

The available collision handler names are:

  • none
    Collisions do not affect widget position.
  • flip
    Moves the widget to the opposite side of the target element if it allows more of the widget to be visible.
  • fit
    Shifts the widget from outside of the screen to fully display the widget.
  • flipfit
    Applies the fit collision handler after flip.

When using a widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this option using the PositionResolveCollision enum in the following manner. This enum accepts the following values: Fit, Flip, FlipFit and None.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Position(p => p
        .Collision(PositionResolveCollision.Fit, PositionResolveCollision.Flip)
    )
)
@(Html.DevExtreme().WidgetName() _
    .Position(Sub(p)
        p.Collision(PositionResolveCollision.Fit, PositionResolveCollision.Flip)
    End Sub)
)

my

The position of the widget to align against the target element.

Type:

String

|

Object

Accepted Values: 'bottom' | 'center' | 'left' | 'left bottom' | 'left top' | 'right' | 'right bottom' | 'right top' | 'top'

The my option can take on an object containing the x and y fields, which specify horizontal and vertical position specifier respectively, or a string value consisting of horizontal and vertical position specifiers separated by a space (e.g., "left top"). The default value for each position specifier is "center". If you assign the "left" value to this option, it will be converted to the "left center" value.

JavaScript
position: { my: 'left' };

When using a widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this option using the HorizontalAlignment and VerticalAlignment enums in the following manner.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Position(p => p
        .My(HorizontalAlignment.Right, VerticalAlignment.Bottom)
    )
)
@(Html.DevExtreme().WidgetName() _
    .Position(Sub(p)
        p.My(HorizontalAlignment.Right, VerticalAlignment.Bottom)
    End Sub)
)

of

The target element that the widget is positioned against.

The option accepts one of the following values.

  • A native CSS selector, or a jQuery selector if you use jQuery

    position: { of: '#targetElement' };
  • A jQuery wrapper

    position: { of: $('#targetElement') };
  • A DOM element

    position: { of: document.getElementById('#targetElement') };
  • The Window object

    position: { of: window };
  • A jQueryEvent or dxEvent object.

    The widget is positioned against the event.pageX and event.pageY coordinates. In the following example, the Popover widget is positioned against a clicked point on the "targetElement".

    $("#targetElement").click(function (event) {
        $("#popover").dxPopover("option", "position.of", event);
        // ...
    })

offset

Specifies horizontal and vertical offset in pixels.

Type:

String

|

Object

This options accepts an object containing the x and y fields which specify the horizontal and vertical offset respectively, or a string consisting of horizontal and vertical offset values separated separated by a space (e.g., "5 -10").

JavaScript
position: { offset: '5 -10' };

When you configure a widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, this option accepts two values of the double type.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Position(p => p
        .Offset(5, -10)
    )
)
@(Html.DevExtreme().WidgetName() _
    .Position(Sub(p)
        p.Offset(5, -10)
    End Sub)
)