DevExtreme Vue - Resize and Relocate

To change the size of the Popup, specify the height and width options.

jQuery
HTML
JavaScript
<div id="popupContainer">
    <p>Popup content</p>
</div>
$(function() {
    $("#popupContainer").dxPopup({
        title: "Popup Title",
        visible: true,
        height: 300,
        width: 500
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="Popup Title"
    [(visible)]="isPopupVisible"
    [height]="300"
    [width]="500">
    <div *dxTemplate="let data of 'content'">
        <p>Popup content</p>
    </div>
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})

To allow an end user to resize the Popup, assign true to the resizeEnabled option.

jQuery
JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        title: "Popup Title",
        visible: true,
        resizeEnabled: true
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="Popup Title"
    [(visible)]="isPopupVisible"
    [resizeEnabled]="true">
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})

If you need to position the Popup against a specific element on your page, set the position option.

jQuery
JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        title: "Popup Title",
        visible: true,
        position: {
            my: "left",
            at: "left",
            of: "#targetElement"
        }
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="Popup Title"
    [(visible)]="isPopupVisible">
    <dxo-position
        my="left"
        at="left"
        of="#targetElement">
    </dxo-position>
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})

This configuration of the position option reads as follows: "place my left side at the left side of the "#targetElement".

By default, an end user is allowed to change the Popup position only on desktops. To enable this feature on other devices too, set the dragEnabled option to true. Note that the user drags the Popup by its title, so the title should not be hidden.

jQuery
JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        title: "Popup Title",
        visible: true,
        dragEnabled: true
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="Popup Title"
    [(visible)]="isPopupVisible"
    [dragEnabled]="true">
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
NOTE
Dragging is possible only if the "height: 100%" style is applied to the <html> element and "min-height: 100%" - to the <body> element.
See Also