jQuery/JS Common - Object Structures - positionConfig

Assign this object to the position property of an overlay UI component (Popup, Popover, Tooltip, etc.).

To position an element, specify the my, at, and of properties. In the following code, the Popup UI component's left side is aligned with the target's right side. This configuration reads as follows: "place my left side at the right side of the #target element."

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        position: {
            my: "left",
            at: "right",
            of: "#target"
        }
    });
});

<dx-popup ... >
    <dxo-position
        my="left"
        at="right"
        of="#target">
    </dxo-position>
</dx-popup>

<template>
    <DxPopup ... >
        <DxPosition
            my="left"
            at="right"
            of="#target"
        />
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxPopup, {
    DxPosition
} from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup,
        DxPosition
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Popup, {
    Position
} from 'devextreme-react/popup';

class App extends React.Component {
    render() {
        return (
            <Popup ... >
                <Position
                    my="left"
                    at="right"
                    of="#target"
                />
            </Popup>
        );
    }
}
export default App;

You can use the offset property to further adjust the position.

Possible positions are limited by the Window. To limit them by another element, specify the boundary property. If actual boundaries should be narrower or wider than the boundary element, set the boundaryOffset.

When a specified position exceeds the boundaries, a collision occurs. Use the collision property to specify how such collisions should be resolved.

To set this property, use an object with the x and y fields. These fields specify the target element's horizontal and vertical sides, respectively. Alternatively, you can use a string shortcut from the accepted values list.

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        position: {
            // ...
            at: "left top"
            // ===== or =====
            at: { x: "left", y: "top" }
        }
    });
});

<dx-popup ... >
    <dxo-position ...
        at="left top">
        <!-- or -->
        <dxo-at x="left" y="top"></dxo-at>
    </dxo-position>
</dx-popup>

<template>
    <DxPopup ... >
        <DxPosition
            at="left top">
            <!-- or -->
            <DxAt x="left" y="top" />
        </DxPosition>
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxPopup, {
    DxPosition,
    DxAt
} from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup,
        DxPosition,
        DxAt
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Popup, {
    Position,
    At
} from 'devextreme-react/popup';

class App extends React.Component {
    render() {
        return (
            <Popup ... >
                <Position
                    at="left top">
                    {/* or */}
                    <At x="left" y="top" />
                </Position>
            </Popup>
        );
    }
}
export default App;

@(Html.DevExtreme().Popup()
    .Position(p => p
        .At(HorizontalAlignment.Left, VerticalAlignment.Top)
    )
)

@(Html.DevExtreme().Popup() _
    .Position(Sub(p)
        p.At(HorizontalAlignment.Left, VerticalAlignment.Top)
    End Sub)
)

The boundary element limits possible positions for the overlay element. The default boundary element is Window. If actual boundaries should be narrower or wider than the boundary element, set the boundaryOffset. When a specified position exceeds the boundaries, a collision occurs.

For information on accepted value types, refer to the of property description.

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

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        position: {
            // ...
            boundaryOffset: "50 -50"
            // ===== or =====
            boundaryOffset: { x: 50, y: -50 }
        }
    });
});

<dx-popup ... >
    <dxo-position ...
        boundaryOffset="50 -50">
        <!-- or -->
        <dxo-boundary-offset [x]="50" [y]="-50"></dxo-boundary-offset>
    </dxo-position>
</dx-popup>

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

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;

@(Html.DevExtreme().Popup()
    .Position(p => p
        .BoundaryOffset(50, -50)
    )
)

@(Html.DevExtreme().Popup() _
    .Position(Sub(p)
        p.BoundaryOffset(50, -50)
    End Sub)
)

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.

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

<dx-popup ... >
    <dxo-position ...
        collision="flip none">
        <!-- or -->
        <dxo-collision x="flip" y="none"></dxo-collision>
    </dxo-position>
</dx-popup>

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

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;

@(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)
)

To set this property, use an object with the x and y fields. These fields specify the overlay element's horizontal and vertical sides, respectively. Alternatively, you can use a string shortcut from the accepted values list.

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        position: {
            // ...
            my: "left top"
            // ===== or =====
            my: { x: "left", y: "top" }
        }
    });
});

<dx-popup ... >
    <dxo-position ...
        my="left top">
        <!-- or -->
        <dxo-my x="left" y="top"></dxo-my>
    </dxo-position>
</dx-popup>

<template>
    <DxPopup ... >
        <DxPosition
            my="left top">
            <!-- or -->
            <DxMy x="left" y="top" />
        </DxPosition>
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxPopup, {
    DxPosition,
    DxMy
} from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup,
        DxPosition,
        DxMy
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Popup, {
    Position,
    My
} from 'devextreme-react/popup';

class App extends React.Component {
    render() {
        return (
            <Popup ... >
                <Position
                    my="left top">
                    {/* or */}
                    <My x="left" y="top" />
                </Position>
            </Popup>
        );
    }
}
export default App;

@(Html.DevExtreme().Popup()
    .Position(p => p
        .My(HorizontalAlignment.Left, VerticalAlignment.Top)
    )
)

@(Html.DevExtreme().Popup() _
    .Position(Sub(p)
        p.My(HorizontalAlignment.Left, VerticalAlignment.Top)
    End Sub)
)

This property accepts the following value types:

• CSS selector (or jQuery selector if jQuery is used)

  jQuery

  index.js

  $(function() {
      $("#popupContainer").dxPopup({
          // ...
          position: {
              of: "#target"
          }
      });
  });

  Angular

  app.component.html

  <dx-popup ... >
      <dxo-position
          of="#target">
      </dxo-position>
  </dx-popup>

  Vue

  App.vue

  <template>
      <DxPopup ... >
          <DxPosition
              of="#target"
          />
      </DxPopup>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  
  import DxPopup, {
      DxPosition
  } from 'devextreme-vue/popup';
  
  export default {
      components: {
          DxPopup,
          DxPosition
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.light.css';
  
  import Popup, {
      Position
  } from 'devextreme-react/popup';
  
  class App extends React.Component {
      render() {
          return (
              <Popup ... >
                  <Position
                      of="#target"
                  />
              </Popup>
          );
      }
  }
  export default App;

• Window

  jQuery

  index.js

  $(function() {
      $("#popupContainer").dxPopup({
          // ...
          position: {
              of: window
          }
      });
  });

  Angular

  app.component.html

  app.component.ts

  <dx-popup>
      <dxo-position
          [of]="getWindow()">
      </dxo-position>
  </dx-popup>

  import { Component } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      getWindow() {
          return window;
      }
  }

  Vue

  App.vue

  <template>
      <DxPopup>
          <DxPosition :of="target" />
      </DxPopup>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  
  import DxPopup, {
      DxPosition
  } from 'devextreme-vue/popup';
  
  export default {
      components: {
          DxPopup,
          DxPosition
      },
      data() {
          return {
              target: window
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.light.css';
  
  import Popup, {
      Position
  } from 'devextreme-react/popup';
  
  class App extends React.Component {
      constructor(props) {
          super(props);
          this.target = window;
      }
      render() {
          return (
              <Popup>
                  <Position
                      of={this.target}
                  />
              </Popup>
          );
      }
  }
  export default App;

• EventObject (or jQuery.Event if jQuery is used)

  The overlay element is positioned at the event.pageX and event.pageY coordinates. In the following example, the Popover UI component is positioned at the point where the user has clicked.

  jQuery

  index.js

  $("#target").click(function (event) {
      $("#popover").dxPopover("option", "position.of", event);
  }

  Angular

  app.component.html

  app.component.ts

  <a id="target" (click)="eventHandler($event, item)">Details</a>
  <dx-popover>
      <dxo-position
          [of]="target">
      </dxo-position>
  </dx-popover>

  import { Component } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      eventHandler($event, item) {
          this.target = $event;
      }
  }

  Vue

  App.vue

  <template>
      <div>
          <a id="target" @click="setPosition">Details</a>
          <DxPopover>
              <DxPosition
                  :of="target"
              />
          </DxPopover>
      </div>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  
  import DxPopover, {
      DxPosition
  } from 'devextreme-vue/popover';
  
  export default {
      components: {
          DxPopover,
          DxPosition
      },
      methods: {
          setPosition: function(event) {
              this.target = event;
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.light.css';
  
  import Popover, {
      Position
  } from 'devextreme-react/popover';
  
  class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              target: undefined
          }
          this.setPosition = this.setPosition.bind(this);
      }
      setPosition(e) {
          e.persist();
          this.setState({
              target: e
          });
      }
      render() {
          return (
              <React.Fragment>
                  <a id="target" onClick={this.setPosition}>Details</a>
                  <Popover>
                       <Position
                          of={this.state.target}
                      />
                  </Popover>
              </React.Fragment>
          );
      }
  }
  export default App;

The following value types are more suitable for jQuery:

• jQuery element

  index.js

  $(function() {
      $("#popupContainer").dxPopup({
          // ...
          position: {
              of: $("#target")
          }
      });
  });

• DOM node

  index.js

  $(function() {
      $("#popupContainer").dxPopup({
          // ...
          position: {
              of: document.getElementById("#target")
          }
      });
  });

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 shifts the element to the right or down; a negative offset shifts it to the left or up.

In the following code, the overlay element is shifted 50 pixels to the right and 25 pixels up.

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        position: {
            // ...
            offset: "50 -25"
            // ===== or =====
            offset: { x: 50, y: -25 }
        }
    });
});

<dx-popup ... >
    <dxo-position ...
        offset="50 -25">
        <!-- or -->
        <dxo-offset [x]="50" [y]="-25"></dxo-offset>
    </dxo-position>
</dx-popup>

<template>
    <DxPopup ... >
        <DxPosition
            offset="50 -25">
            <!-- or -->
            <DxOffset :x="50" :y="-25" />
        </DxPosition>
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxPopup, {
    DxPosition,
    DxOffset
} from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup,
        DxPosition,
        DxOffset
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Popup, {
    Position,
    Offset
} from 'devextreme-react/popup';

class App extends React.Component {
    render() {
        return (
            <Popup ... >
                <Position
                    offset="50 -25">
                    {/* or */}
                    <Offset x={50} y={-25} />
                </Position>
            </Popup>
        );
    }
}
export default App;

@(Html.DevExtreme().Popup()
    .Position(p => p
        .Offset(50, -25)
    )
)

@(Html.DevExtreme().Popup() _
    .Position(Sub(p)
        p.Offset(50, -25)
    End Sub)
)