How to add a footer to window?

7 posts, 0 answers
  1. xin
    xin avatar
    2 posts
    Member since:
    May 2014

    Posted 21 Jun 2014 Link to this post

    Kendo UI window only provides the way to add title on window, is there a way to add a footer sticking to bottom while window height is not fixed?
    Basically I am looking for footer similar to twitter bootstrap modal

    http://getbootstrap.com/javascript/#modals

    <div class="modal fade">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
    <p>One fine body&hellip;</p>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
    </div>

    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 25 Jun 2014 Link to this post

    Hello Xin,

    To achieve this you can add the buttons as window content and position them using custom CSS rules. A sample implementation is demonstrated in this example.

    Regards,
    Iliana Nikolova
    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. xin
    xin avatar
    2 posts
    Member since:
    May 2014

    Posted 26 Jun 2014 in reply to Iliana Nikolova Link to this post

    Thanks for reply.
    This way can not create a fixed height window and let footer stick to the bottom.
    It would be nice if Kendo Window could offer a way to make fixed height content area.
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 30 Jun 2014 Link to this post

    Hi Xin,

    You can set height to Kendo UI Window via the height option. Also the buttons can be stuck to the bottom using custom CSS rules. For your convenience I modified the example with a possible implementation. 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. ALGOTEC
    ALGOTEC avatar
    6 posts
    Member since:
    Aug 2013

    Posted 31 Aug 2015 in reply to Iliana Nikolova Link to this post

    If the window is shorter then the content and a scroll bar is added the footer is not stuck to bottom anymore... couldn't fix this (similar problem also in the mobile version).
  7. ALGOTEC
    ALGOTEC avatar
    6 posts
    Member since:
    Aug 2013

    Posted 31 Aug 2015 Link to this post

    Also tried to handle the scrolling myself by adding bottom padding to the content with position absolute to the footer but in mobile it's not working because of the km-scroll-container.
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 01 Sep 2015 Link to this post

    Hi,

    Take a look at this thread which discussed the same subject and contains a possible solution. I would like to remind you that this layout is not supported out-of-the-box by Kendo UI Window and we cannot guarantee that the workaround will work in all cases. 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready