DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

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.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.light.css';

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

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

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