Having trouble getting help?
Contact Support
Contact Support
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();
}
}