Angular Common - Object Structures - positionConfig - offset
The offset is specified in pixels. To set this property, use an object with the x and y fields. These fields specify horizontal and vertical offsets, respectively. Alternatively, you can use a string value that indicates the offsets separated by a whitespace character. A positive offset shifts the element to the right or down; a negative offset shifts it to the left or up.
In the following code, the overlay element is shifted 50 pixels to the right and 25 pixels up.
jQuery
$(function() { $("#popupContainer").dxPopup({ // ... position: { // ... offset: "50 -25" // ===== or ===== offset: { x: 50, y: -25 } } }); });
Angular
<dx-popup ... > <dxo-position ... offset="50 -25"> <!-- or --> <dxo-offset [x]="50" [y]="-25"></dxo-offset> </dxo-position> </dx-popup>
Vue
<template> <DxPopup ... > <DxPosition offset="50 -25"> <!-- or --> <DxOffset :x="50" :y="-25" /> </DxPosition> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxPopup, { DxPosition, DxOffset } from 'devextreme-vue/popup'; export default { components: { DxPopup, DxPosition, DxOffset } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import Popup, { Position, Offset } from 'devextreme-react/popup'; class App extends React.Component { render() { return ( <Popup ... > <Position offset="50 -25"> {/* or */} <Offset x={50} y={-25} /> </Position> </Popup> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Popup() .Position(p => p .Offset(50, -25) ) )
@(Html.DevExtreme().Popup() _ .Position(Sub(p) p.Offset(50, -25) End Sub) )
If you have technical questions, please create a support ticket in the DevExpress Support Center.