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

Layout : footer not visible

3 Answers 125 Views

General Discussions

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

Hiren asked on 13 Jun 2014, 03:59 PM

Hello,

I am trying a simple layout as below.
The footer element doesn't show on any device.

Thanks for your time and help.

--
Hiren

<!DOCTYPE html>

<html>
<head>
<title>Navy 4 Seniors</title>
<link href="../resources/css/kendo.mobile.all.min.css" rel="stylesheet" />
</head>

<body>

<div id="home" data-role="view" data-layout="default">KendoUI Mobile World</div>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">Header</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home">Footer</a>
</div>
</footer>
</section>
<script src="../resources/js/jquery.min.js"></script>
<script src="../resources/js/kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application();
</script>
</body>
</html>

3 Answers, 1 is accepted

answered on 16 Jun 2014, 08:24 AM

photo1.jpg

Hi Hiren,

I have extracted your code sample into the following jsBin and tested it on a mobile device and the footer was displayed as expected, you can see the screenshot attached.

http://jsbin.com/nowidevi/1/edit

Regards,
Kiril Nikolov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 16 Jun 2014, 04:24 PM

footer_invisible.png

Thanks for your reply Kiril.
On IPhone 5 emulator (Google Chrome Ripple), it is seen as attached.
Please let me know if I should use any other emulator.
Thanks.

--
Hiren