Resize in Vue Dialog

02 Sep 20264 minutes to read

The Dialog supports resizing. You can resize the Dialog by selecting its resize handle (grip) or by hovering over any of its edges or borders within the sample container.

The resizable Dialog can be created by setting the enableResize property to true, which is used to change the size of a Dialog dynamically and view its content in expanded mode. The resizeHandles property can also be configured to specify all the directions in which the Dialog can be resized. When you configure the target property along with the enableResize property, the Dialog can be resized within its specified target container.

<template>
    <div id="target" class="control-section">
        <ejs-dialog :header="header" :content="content" :enableResize='true' :resizeHandles='resizeHandles'
            :allowDragging="draggable" :target='target' :width='width'> </ejs-dialog>
    </div>
</template>
<script setup>

import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';

const target = '#target';
const width = '300px';
const header = 'Dialog';
const resizeHandles = ['All'];
const draggable = true;
const content = 'This is a Dialog with resize enabled.';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

#app {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.control-section {
    min-height: 355px;
    margin: 10px;
}
</style>
<template>
    <div id="target" class="control-section">
        <ejs-dialog :header="header" :content="content" :enableResize='true' :resizeHandles='resizeHandles'
            :allowDragging="draggable" :target='target' :width='width'> </ejs-dialog>
    </div>
</template>
<script>
import { DialogComponent } from '@syncfusion/ej2-vue-popups';

export default {
    name: "App",
    components: {
        "ejs-dialog": DialogComponent
    },
    data: function () {
        return {
            target: '#target',
            width: '300px',
            header: 'Dialog',
            resizeHandles: ['All'],
            draggable: true,
            content: 'This is a Dialog with resize enabled.'
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

#app {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.control-section {
    min-height: 355px;
    margin: 10px;
}
</style>