Setting Maximum Height to the Dialog

4 Apr 20223 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. There is an option to set the maxHeight of the Dialog in the beforeOpen event.

<div id='container'>
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id="dialog" showCloseIcon="true" beforeOpen="onBeforeOpen" header="Dialog" content="This is a Dialog with max-height property." target="#container" width="800px">
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>

<script>
    document.getElementById('targetButton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show(true);
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
    function onBeforeOpen(args) {
        args.maxHeight = '300px';
    }
</script>

<style>

    #container {
        height: 100%;
        width: 100%;
        position: absolute;
        padding: 20px;
        margin: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: 0px;
    }
</style>
public class HomeController : Controller
{

    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }
        public string cssClass { get; set; }
    }
    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { isPrimary = true, cssClass = "e-flat", content = "OK" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
        return View();
    }

}