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


    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 id="window">
            <div style="height: 100%;">
                <div style="overflow: auto; height: calc(100% - 70px); padding: 10px">
                <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>
            $(document).ready(function() {
                var window = $("#window");
                    click: function(e) {
                    title: "Title",
                    actions: [],
                    modal: true,
                    width: "90%",
                    height: "90%"
        <style scoped>
            #window {
                padding: 0px;
                overflow: hidden;

    A running example can be found at
  2. Dimo
    Dimo avatar
    8407 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>.

    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.



Back to Top