React Common - Object Structures - positionConfig - my

Specifies the overlay element's side or corner to align with a target element.

Type:

PositionAlignment

|

Object

To set this property, use an object with the x and y fields. These fields specify the overlay 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: {
            // ...
            my: "left top"
            // ===== or =====
            my: { x: "left", y: "top" }
        }
    });
});
Angular
app.component.html
<dx-popup ... >
    <dxo-position ...
        my="left top">
        <!-- or -->
        <dxo-my x="left" y="top"></dxo-my>
    </dxo-position>
</dx-popup>
Vue
App.vue
<template>
    <DxPopup ... >
        <DxPosition
            my="left top">
            <!-- or -->
            <DxMy x="left" y="top" />
        </DxPosition>
    </DxPopup>
</template>

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

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

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

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

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

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