Footer fixed bottom

4 posts, 0 answers
  1. Mattia
    Mattia avatar
    20 posts
    Member since:
    Mar 2015

    Posted 21 Nov 2016 Link to this post

    Hi all, I need a footer for a kendo window, in the bottom of it, indipendent of vertical scroll. I've tried this approach http://dojo.telerik.com/eGISi/3 (and also using bootstrap class navbar navbar-fixed-bottom) but every time you move the window, the footer it's moved on the bottom of the page, instead of the bottom of the window. This issue is not present if you resize the window.
    So I don't understand if is a sort of kendo window strange behaviour or maybe I'm doing wrong the approach.

    Any ideas? 
    Thanks!
  2. Misho
    Admin
    Misho avatar
    139 posts

    Posted 22 Nov 2016 Link to this post

    Hello,

    The footer feature is not supported out-of-the-box by Kendo UI Window. However you can try the approaches that are described in this forum thread.
    Here is the code sample:
    http://dojo.telerik.com/@Iliana/ilAH

    I hope you will find this helpful.

    Regards,
    Misho
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. Ryan
    Ryan avatar
    3 posts
    Member since:
    Jan 2017

    Posted 27 Jan Link to this post

    I'm also using Bootstrap, but standard window functionality and not using Bootstrap Modals. this is what I did and is working fine.

    HTML 

         <div class="row kendo-modal--footer">
                <div class="col-xs-12 text-right">
                    <button type="button" id="myButton" class="btn btn-primary close-button">
                        Cancel
                    </button>
                    <button type="button" id="" class="btn btn-secondary">
                        Save
                    </button>
                </div>

          </div>  

     

    CSS

     

    .kendo-modal--footer{
        bottom: 0;
        right: 0;
        position: absolute;
        padding: 10px;
        background: #f5f5f5;
        width: 100%;
        border-top: 1px solid #a1a1a1;
    }

  4. Misho
    Admin
    Misho avatar
    139 posts

    Posted 30 Jan Link to this post

    Hi,

    I'm happy to hear that you managed to implement the desired functionality.

    Regards,
    Misho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top