This is a migrated thread and some comments may be shown as answers.

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

4 Answers 443 Views
Window
This is a migrated thread and some comments may be shown as answers.
David Liebeherr - rent-a-developer
Top achievements
Rank 1
David Liebeherr - rent-a-developer asked on 22 Jul 2014, 11:25 PM
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.

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 23 Jul 2014, 01:09 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tadeusz Dracz
Top achievements
Rank 1
answered on 22 Jun 2016, 03:58 PM

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

 

Regards,
Tadeusz

0
Bridge24
Top achievements
Rank 1
answered on 04 Oct 2019, 03:42 PM

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! 

0
Petar
Telerik team
answered on 08 Oct 2019, 10:45 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Window
Asked by
David Liebeherr - rent-a-developer
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Tadeusz Dracz
Top achievements
Rank 1
Bridge24
Top achievements
Rank 1
Petar
Telerik team
Share this question
or