To position an element, specify the my, at, and of options. In the following code, the Popup widget'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."

jQuery

index.js

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

Angular

app.component.html

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

Vue

App.vue

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

<script>
import 'devextreme/dist/css/dx.common.css';
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.common.css';
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 option to further adjust the position.

Possible positions are limited by the Window. To limit them by another element, specify the boundary option. 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 option to specify how such collisions should be resolved.

at

Specifies the target element's side or corner where the overlay element should be positioned.

Type:

String

Object

To set this option, 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.

jQuery

index.js

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

Angular

app.component.html

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

Vue

App.vue

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

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

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

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

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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;

ASP.NET MVC Controls

Razor C#

Razor VB

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

boundary

A boundary element in which the overlay element must be positioned.

Type:

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 option description.

boundaryOffset

Specifies the offset of boundaries from the boundary element.

Type:

String

Object

The offset is specified in pixels. To set this option, 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).

jQuery

index.js

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

Angular

app.component.html

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

Vue

App.vue

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

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

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

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

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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;

ASP.NET MVC Controls

Razor C#

Razor VB

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

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

collision

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

Type:

String

Object

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

index.js

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

Angular

app.component.html

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

Vue

App.vue

<template>
    <DxPopup ... >
        <DxPosition
            collision="flip none">
            <!-- or -->
            <DxCollision x="flip" y="none" />
        </DxPosition>
    </DxPopup>
</template>

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

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

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

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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

Razor C#

Razor VB

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

my

Specifies the overlay element's side or corner to align with a target element.

Type:

String

Object

To set this option, 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.

jQuery

index.js

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

Angular

app.component.html

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

Vue

App.vue

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

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

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

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

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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;

ASP.NET MVC Controls

Razor C#

Razor VB

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

of

The target element relative to which the overlay element should be positioned.

Type:

This option 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.common.css';
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.common.css';
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.common.css';
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.common.css';
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;

dxEvent (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 widget 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.common.css';
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.common.css';
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")
        }
    });
});

offset

Specifies the overlay element's offset from a specified position.

Type:

String

Object

The offset is specified in pixels. To set this option, 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.

jQuery

index.js

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

Angular

app.component.html

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

Vue

App.vue

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

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

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

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

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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;

ASP.NET MVC Controls

Razor C#

Razor VB

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

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

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery/JS Common - Object Structures - positionConfig

jQuery

Angular

Vue

React

at

jQuery

Angular

Vue

React

ASP.NET MVC Controls

boundary

boundaryOffset

jQuery

Angular

Vue

React

ASP.NET MVC Controls

collision

jQuery

Angular

Vue

React

ASP.NET MVC Controls

my

jQuery

Angular

Vue

React

ASP.NET MVC Controls

of

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

offset

jQuery

Angular

Vue

React

ASP.NET MVC Controls