Window with Okay/Cancel button at bottom and scrollable content (Solution included)

[David Liebeherr - rent-a-developer]

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:

<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.

[Dimo]

Hello David,

Thanks for sharing. A possible alternative solution that will work in older browsers, which do not support calc(), so to use absolute positioning for the footer <div> and a bottom padding/margin for the content <div>.

Regards,
Dimo
Telerik

 

 

[Tadeusz Dracz]

I know it's an old post, but thank you - it's just what I needed.

 

Regards,
Tadeusz

[Bridge24]

A few years later, an updated version using flex, + a fixed header zone in case you need it.

With some help from https://stackoverflow.com/a/21168136/437946 !

https://dojo.telerik.com/@foxontherock/AfIrivuC/2

//todo: use a kendoToolbar on the footer! 

[Petar]

Hi Daniel,

Thank you for sharing the solution with the community!

It is a nice practice to provide alternative implementation to a given case even years after the initial post in the thread. 

Regards,
Petar
Progress Telerik