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

5 posts, 0 answers
  1. David Liebeherr - rent-a-developer
    David Liebeherr - rent-a-developer avatar
    11 posts
    Member since:
    Dec 2006

    Posted 22 Jul 2014 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 23 Jul 2014 Link to this post

    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!
     
  3. Tadeusz Dracz
    Tadeusz Dracz avatar
    2 posts
    Member since:
    May 2010

    Posted 22 Jun 2016 Link to this post

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

     

    Regards,
    Tadeusz

  4. Bridge24
    Bridge24 avatar
    90 posts
    Member since:
    Jan 2009

    Posted 04 Oct 2019 Link to this post

    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! 

  5. Petar
    Admin
    Petar avatar
    299 posts

    Posted 08 Oct 2019 Link to this post

    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.
Back to Top