jQuery/JS Common - Object Structures - positionConfig - collision

Specifies how to resolve collisions - when the overlay element exceeds the boundary element.

Type:

String

|

Object

Accepted Values: 'fit' | 'fit flip' | 'fit flipfit' | 'fit none' | 'flip' | 'flip fit' | 'flip none' | 'flipfit' | 'flipfit fit' | 'flipfit none' | 'none' | 'none fit' | 'none flip' | 'none flipfit'

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.

index.js
  • $(function() {
  • $("#popupContainer").dxPopup({
  • // ...
  • position: {
  • // ...
  • collision: "flip none"
  • // ===== or =====
  • collision: { x: "flip", y: "none" }
  • }
  • });
  • });

x

Specifies how to resolve horizontal collisions.

Type:

String

Default Value: 'none'
Accepted Values: 'fit' | 'flip' | 'flipfit' | 'none'

y

Specifies how to resolve vertical collisions.

Type:

String

Default Value: 'none'
Accepted Values: 'fit' | 'flip' | 'flipfit' | 'none'