Vue Common - Object Structures - positionConfig - boundaryOffset
Specifies the offset of boundaries from the boundary element.
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).
jQuery
$(function() { $("#popupContainer").dxPopup({ // ... position: { // ... boundaryOffset: "50 -50" // ===== or ===== boundaryOffset: { x: 50, y: -50 } } }); });
Angular
<dx-popup ... > <dxo-position ... boundaryOffset="50 -50"> <!-- or --> <dxo-boundary-offset [x]="50" [y]="-50"></dxo-boundary-offset> </dxo-position> </dx-popup>
Vue
<template> <DxPopup ... > <DxPosition boundary-offset="50 -50"> <!-- or --> <DxBoundaryOffset :x="50" :y="-50" /> </DxPosition> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxPopup, { DxPosition, DxBoundaryOffset } from 'devextreme-vue/popup'; export default { components: { DxPopup, DxPosition, DxBoundaryOffset } } </script>
React
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;
ASP.NET MVC Controls
@(Html.DevExtreme().Popup() .Position(p => p .BoundaryOffset(50, -50) ) )
@(Html.DevExtreme().Popup() _ .Position(Sub(p) p.BoundaryOffset(50, -50) End Sub) )
If you have technical questions, please create a support ticket in the DevExpress Support Center.