positionConfig collision

Specifies how to move the widget if it overflows the screen.

Type: String|Object
Accepted Values: 'none' | 'flip' | 'fit' | 'flipfit' | 'none flip' | 'flip none' | 'none fit' | 'fit none' | 'none flipfit' | 'flipfit none' | 'flip fit' | 'fit flip' | 'fit flipfit' | 'flipfit fit'

A string passed to this option should contain a collision handler name, or a pair of names separated by space. If the string consists of a single collision handler name, it is applied to both horizontal and vertical axes. If you pass a pair of names separated by space, the first collision handler will be applied to the horizontal axis, the second to the vertical axis.

// a string containing horizontal and vertical
// collision handlers separated by space
collision: "flip fit";

You can also specify different collision handlers for horizontal and vertical axes in one of the following ways.

// an object containing 'x' and 'y' fields
collision: {
    x: "flip", // horizontal collision handler
    y: "none" // vertical collision handler

The available collision handler names are:

  • none
    Collisions do not affect widget position.
  • flip
    Moves the widget to the opposite side of the target element if it allows more of the widget to be visible.
  • fit
    Shifts the widget from outside of the screen to fully display the widget.
  • flipfit
    Applies the fit collision handler after flip.
Show Example:
<div class="button" data-bind="dxButton: { text: 'Show popup', onClick: showPopup }"></div>
<p style="text-align:center"><b>Position</b></p>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Collision</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: collisionValues, value: collisionValue }"></div>
<div id="targetElement"></div>
<div id="myPopup" data-bind="dxPopup: {
    title: 'My Popup',
    visible: popupVisible,
    height: 150,
    width: 180,
    onClick: hidePopup,
    position: {
        my: 'top',
        at: 'bottom left',
        of: $('#targetElement'),
        collision: collisionValue()
      <p>The popup text.</p>
      <div class="button" data-bind="dxButton: { text: 'Hide popup', onClick: hidePopup }"></div>
popupVisible = ko.observable(false);
collisionValue = ko.observable("none");
showPopup = function () {
hidePopup = function () {
collisionValues = [
  "none flip",
  "none fit",
  "flip none",
  "flip fit",
  "fit none",
  "fit flip"
  text-align: center;
  margin: 10px;
#targetElement {
  margin-top: 40px;
  margin-right: 10%;
  display: inline-block;
  width: 70%;
  height: 50%;
  border-style: solid;
  background-color: lightgreen;


Specifies the horizontal collision handler.

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


Specifies the vertical collision handler.

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