React 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.

App.js
  • 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;

x

Specifies how to resolve horizontal collisions.

Default Value: 'none'

y

Specifies how to resolve vertical collisions.

Default Value: 'none'