This is a migrated thread and some comments may be shown as answers.

How to add a footer to window?

6 Answers 699 Views
Window
This is a migrated thread and some comments may be shown as answers.
xin
Top achievements
Rank 1
xin asked on 21 Jun 2014, 08:03 AM
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 -->

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 25 Jun 2014, 06:19 AM
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!
 
0
xin
Top achievements
Rank 1
answered on 26 Jun 2014, 08:00 PM
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.
0
Iliana Nikolova
Telerik team
answered on 30 Jun 2014, 11:37 AM
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!
 
0
ALGOTEC
Top achievements
Rank 1
answered on 31 Aug 2015, 06:40 AM
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).
0
ALGOTEC
Top achievements
Rank 1
answered on 31 Aug 2015, 06:45 AM
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.
0
Iliana Nikolova
Telerik team
answered on 01 Sep 2015, 11:06 AM
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!
 
Tags
Window
Asked by
xin
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
xin
Top achievements
Rank 1
ALGOTEC
Top achievements
Rank 1
Share this question
or