DevExtreme Vue - Resize and Relocate
To change the size of the Popup, specify the height and width options.
- <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>
To allow an end user to resize the Popup, assign true to the resizeEnabled option.
- <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>
If you need to position the Popup against a specific element on your page, set the position option.
- <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>
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.
- <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>
<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.