Vue Common - Object Structures - positionConfig - boundaryOffset

Specifies the offset of boundaries from the boundary element.

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 narrows the boundaries; a negative offset widens the boundaries.

In the following code, left and right boundaries are narrowed (x is 50), but top and bottom boundaries are widened (y is -50).

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Popup, {
  • Position,
  • BoundaryOffset
  • } from 'devextreme-react/popup';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Popup ... >
  • <Position
  • boundaryOffset="50 -50">
  • {/* or */}
  • <BoundaryOffset x={50} y={-50} />
  • </Position>
  • </Popup>
  • );
  • }
  • }
  • export default App;

x

Specifies a horizontal offset.

Type:

Number

Default Value: 0

y

Specifies a vertical offset.

Type:

Number

Default Value: 0