Vue Common - Object Structures - positionConfig - at
Specifies the target element's side or corner where the overlay element should be positioned.
Accepted Values: 'bottom' | 'center' | 'left' | 'left bottom' | 'left top' | 'right' | 'right bottom' | 'right top' | 'top'
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) )
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.