Vue Popup - Resize and Relocate
To change the size of the Popup, specify the height and width properties.
jQuery
<div id="popupContainer"> <p>Popup content</p> </div>
$(function() { $("#popupContainer").dxPopup({ title: "Popup Title", visible: true, height: 300, width: 500 }); });
Angular
<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 ], // ... })
Vue
<template> <DxPopup :visible.sync="isPopupVisible" :height="300" :width="500" title="Popup Title"> <template> <p>Popup content</p> </template> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxPopup } from 'devextreme-vue/popup'; export default { components: { DxPopup }, data() { return { isPopupVisible: true }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Popup } from 'devextreme-react/popup'; const renderContent = () => { return ( <p>Popup content</p> ); } class App extends React.Component { constructor(props) { super(props); this.state = { isPopupVisible: true }; this.onHiding = this.onHiding.bind(this); } onHiding() { this.setState({ isPopupVisible: false }); } render() { return ( <Popup visible={this.state.isPopupVisible} height={300} width={500} title="Popup Title" contentRender={renderContent} onHiding={this.onHiding} /> ); } } export default App;
To allow an end user to resize the Popup, assign true to the resizeEnabled property.
jQuery
$(function() { $("#popupContainer").dxPopup({ title: "Popup Title", visible: true, resizeEnabled: true }); });
Angular
<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 ], // ... })
Vue
<template> <DxPopup :visible.sync="isPopupVisible" :resize-enabled="true" title="Popup Title" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxPopup } from 'devextreme-vue/popup'; export default { components: { DxPopup }, data() { return { isPopupVisible: true }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Popup } from 'devextreme-react/popup'; class App extends React.Component { constructor(props) { super(props); this.state = { isPopupVisible: true }; this.onHiding = this.onHiding.bind(this); } onHiding() { this.setState({ isPopupVisible: false }); } render() { return ( <Popup visible={this.state.isPopupVisible} resizeEnabled={true} title="Popup Title" /> ); } } export default App;
If you need to position the Popup against a specific element on your page, set the position property.
jQuery
$(function() { $("#popupContainer").dxPopup({ title: "Popup Title", visible: true, position: { my: "left", at: "left", of: "#targetElement" } }); });
Angular
<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 ], // ... })
Vue
<template> <DxPopup :visible.sync="isPopupVisible" title="Popup Title"> <DxPosition my="left" at="left" of="#targetElement"> /> </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 { isPopupVisible: true }; } } </script>
React
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.state = { isPopupVisible: true }; this.onHiding = this.onHiding.bind(this); } onHiding() { this.setState({ isPopupVisible: false }); } render() { return ( <Popup visible={this.state.isPopupVisible} title="Popup Title" onHiding={this.onHiding}> <Position my="left" at="left" of="#targetElement" /> </Popup> ); } } export default App;
This configuration of the position property 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 property to true. Note that the user drags the Popup by its title, so the title should not be hidden.
jQuery
$(function() { $("#popupContainer").dxPopup({ title: "Popup Title", visible: true, dragEnabled: true }); });
Angular
<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 ], // ... })
Vue
<template> <DxPopup :visible.sync="isPopupVisible" :drag-enabled="true" title="Popup Title" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxPopup } from 'devextreme-vue/popup'; export default { components: { DxPopup }, data() { return { isPopupVisible: true }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Popup } from 'devextreme-react/popup'; class App extends React.Component { constructor(props) { super(props); this.state = { isPopupVisible: true }; this.onHiding = this.onHiding.bind(this); } onHiding() { this.setState({ isPopupVisible: false }); } render() { return ( <Popup visible={this.state.isPopupVisible} dragEnabled={true} title="Popup Title" /> ); } } export default App;
<html>
element and "min-height: 100%" - to the <body>
element.See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.