jQuery/JS Common - Object Structures - positionConfig - collision
Specifies how to resolve collisions - when the overlay element exceeds the boundary element.
You can use the following collision resolution algorithms:
"flip"
Move the overlay element to the opposite side of the target if that side has more space."fit"
Move the overlay element to the inside of the boundary element."flipfit"
First apply "flip", then "fit"."none"
Ignore the collision.
To set the collision property, use an object with the x and y fields. These fields specify how to resolve horizontal and vertical collisions, respectively. Alternatively, you can use a string shortcut from the accepted values list.
jQuery
$(function() { $("#popupContainer").dxPopup({ // ... position: { // ... collision: "flip none" // ===== or ===== collision: { x: "flip", y: "none" } } }); });
Angular
<dx-popup ... > <dxo-position ... collision="flip none"> <!-- or --> <dxo-collision x="flip" y="none"></dxo-collision> </dxo-position> </dx-popup>
Vue
<template> <DxPopup ... > <DxPosition collision="flip none"> <!-- or --> <DxCollision x="flip" y="none" /> </DxPosition> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxPopup, { DxPosition, DxCollision } from 'devextreme-vue/popup'; export default { components: { DxPopup, DxPosition, DxCollision } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import Popup, { Position, Collision } from 'devextreme-react/popup'; class App extends React.Component { render() { return ( <Popup ... > <Position collision="flip none"> {/* or */} <Collision x="flip" y="none" /> </Position> </Popup> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Popup() .Position(p => p .Collision(PositionResolveCollision.Flip, PositionResolveCollision.None) ) )
@(Html.DevExtreme().Popup() _ .Position(Sub(p) p.Collision(PositionResolveCollision.Flip, PositionResolveCollision.None) End Sub) )
If you have technical questions, please create a support ticket in the DevExpress Support Center.