Angular Common - Object Structures - positionConfig - at

Specifies the target element's side or corner where the overlay element should be positioned.

Type:

PositionAlignment

|

Object

To set this property, use an object with the x and y fields. These fields specify the target element's horizontal and vertical sides, respectively. Alternatively, you can use a string shortcut from the accepted values list.

jQuery
index.js
$(function() {
    $("#popupContainer").dxPopup({
        // ...
        position: {
            // ...
            at: "left top"
            // ===== or =====
            at: { x: "left", y: "top" }
        }
    });
});
Angular
app.component.html
<dx-popup ... >
    <dxo-position ...
        at="left top">
        <!-- or -->
        <dxo-at x="left" y="top"></dxo-at>
    </dxo-position>
</dx-popup>
Vue
App.vue
<template>
    <DxPopup ... >
        <DxPosition
            at="left top">
            <!-- or -->
            <DxAt x="left" y="top" />
        </DxPosition>
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import DxPopup, {
    DxPosition,
    DxAt
} from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup,
        DxPosition,
        DxAt
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.fluent.blue.light.css';

import Popup, {
    Position,
    At
} from 'devextreme-react/popup';

export default function App() {
    return (
        <Popup ... >
            <Position
                at="left top">
                {/* or */}
                <At x="left" y="top" />
            </Position>
        </Popup>
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Popup()
    .Position(p => p
        .At(HorizontalAlignment.Left, VerticalAlignment.Top)
    )
)

x

Specifies a position in the horizontal direction (for left, right, or center alignment).

Type:

HorizontalAlignment

y

Specifies a position in the vertical direction (for top, bottom, or center alignment).

Type:

VerticalAlignment