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

3 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
    8333 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. Kendo UI is VS 2017 Ready
  4. Tadeusz Dracz
    Tadeusz Dracz avatar
    2 posts
    Member since:
    May 2010

    Posted 22 Jun Link to this post

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

     

    Regards,
    Tadeusz

Back to Top