Vue Common - Object Structures - positionConfig - offset

Specifies the overlay element's offset from a specified position.

Type:

String

|

Object

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.

App.vue
  • <template>
  • <DxPopup ... >
  • <DxPosition
  • offset="50 -25">
  • <!-- or -->
  • <DxOffset :x="50" :y="-25" />
  • </DxPosition>
  • </DxPopup>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxPopup, {
  • DxPosition,
  • DxOffset
  • } from 'devextreme-vue/popup';
  •  
  • export default {
  • components: {
  • DxPopup,
  • DxPosition,
  • DxOffset
  • }
  • }
  • </script>

x

Specifies a horizontal offset.

Type:

Number

Default Value: 0

y

Specifies a vertical offset.

Type:

Number

Default Value: 0