Setting max height to the dialog in Vue Dialog component

11 Jun 20248 minutes to read

By default, the maxHeight for the Dialog is calculated based on the target. If the target is not specified externally, the Dialog consider the body as target and will calculate the maxHeight based on it. We have an option to set the maxHeight of the Dialog in the beforeOpen event.

<template>
    <div>
        <div id="target" class="control-section; position:relative" style="height:360px;">
            <!-- Render Button to open the Dialog -->
            <ejs-button id='dlgbtn' v-on:click="btnClick">Open Dialog</ejs-button>
            <!-- Render Dialog -->
            <ejs-dialog ref="footerDialog" :header='header' :target='target' :width='width' :buttons='buttons'
                :visible='visible' :showCloseIcon='showCloseIcon' :content='content' :close="dlgClose"
                :beforeOpen='onBeforeOpen'>
            </ejs-dialog>
        </div>
    </div>
</template>
<script setup>
import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { onMounted, ref } from 'vue';

const footerDialog = ref(null);
const target = "#target";
const width = '800px';
const header = 'Dialog';
const visible = false;
const showCloseIcon = true;
const content = 'This is a Dialog with max-height';


onMounted(() => {
    document.getElementById('dlgbtn').focus();
});

const btnClick = () => {
    footerDialog.value.show();
};
const dlgClose = () => {
    document.getElementById('dlgbtn').style.display = '';
};
const dlgButtonClick = () => {
    footerDialog.value.hide();
};
const onBeforeOpen = (args) => {
    args.maxHeight = '300px';
};
const buttons = [{ click: dlgButtonClick, buttonModel: { content: 'OK', isPrimary: true } },
{ click: dlgButtonClick, buttonModel: { content: 'Cancel' } }];
</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 {
    height: 100%;
    max-height: 380px;
    overflow: hidden;
}
</style>
<template>
    <div>
        <div id="target" class="control-section; position:relative" style="height:360px;">
            <!-- Render Button to open the Dialog -->
            <ejs-button id='dlgbtn' v-on:click="btnClick">Open Dialog</ejs-button>
            <!-- Render Dialog -->
            <ejs-dialog ref="footerDialog" :header='header' :target='target' :width='width' :buttons='buttons'
                :visible='visible' :showCloseIcon='showCloseIcon' :content='content' :close="dlgClose"
                :beforeOpen='onBeforeOpen'>
            </ejs-dialog>
        </div>
    </div>
</template>
<script>
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
    name: "App",
    components: {
        "ejs-button": ButtonComponent,
        "ejs-dialog": DialogComponent
    },
    data: function () {
        return {
            target: "#target",
            width: '800px',
            header: 'Dialog',
            visible: false,
            showCloseIcon: true,
            content: 'This is a Dialog with max-height',
            buttons: [{ click: this.dlgButtonClick, buttonModel: { content: 'OK', isPrimary: true } },
            { click: this.dlgButtonClick, buttonModel: { content: 'Cancel' } }],
            animationSettings: { effect: 'None' }
        }
    },
    mounted: function () {
        document.getElementById('dlgbtn').focus();
    },
    methods: {
        btnClick: function () {
            this.$refs.footerDialog.show();
        },
        dlgClose: function () {
            document.getElementById('dlgbtn').style.display = '';
        },
        dlgButtonClick: function () {
            this.$refs.footerDialog.hide();
        },
        onBeforeOpen: function (args) {
            args.maxHeight = '300px';
        }
    }
}
</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 {
    height: 100%;
    max-height: 380px;
    overflow: hidden;
}</style>