Hi,
recently I needed a kendo window with an okay and a cancel button at the bottom of the window.
The buttons should stay sticked at the bottom of the window and the content should take all of the available remaining space.
And the content should be scrollable (in case it's bigger then the window).
Here is a solution, in case someone else has the same requirement:
A running example can be found at http://dojo.telerik.com/IjoNe.
recently I needed a kendo window with an okay and a cancel button at the bottom of the window.
The buttons should stay sticked at the bottom of the window and the content should take all of the available remaining space.
And the content should be scrollable (in case it's bigger then the window).
Here is a solution, in case someone else has the same requirement:
<
div
>
<
div
id
=
"window"
>
<
div
style
=
"height: 100%;"
>
<
div
style
=
"overflow: auto; height: calc(100% - 70px); padding: 10px"
>
Content
</
div
>
<
div
style
=
"width: 100%; height: 60px; background-color: #e3e3e3; border-top: solid #C5C5C5 1px"
>
<
div
style
=
"float: right; margin: 10px"
>
<
button
id
=
"okayButton"
style
=
"background-color: green"
>Okay</
button
>
<
button
id
=
"cancelButton"
style
=
"background-color: red"
>Cancel</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
$(document).ready(function() {
var window = $("#window");
$("#okayButton").kendoButton({
click: function(e) {
window.data("kendoWindow").close();
}
});
$("#cancelButton").kendoButton();
window.kendoWindow({
title: "Title",
actions: [],
modal: true,
width: "90%",
height: "90%"
});
window.data("kendoWindow").center();
});
</
script
>
<
style
scoped>
#window {
padding: 0px;
overflow: hidden;
}
</
style
>
</
div
>
A running example can be found at http://dojo.telerik.com/IjoNe.