After some searching, it appears Kendo on it's own handles some of the
formatting needs that angular-kendo usage does not. Below is an article
that discusses the .css file need and I've included the code as well. For
the header to remain static the .header portion of the .css file is needed,
and set the class of the control to "header". The rest is utilized to keep
the tabstrip at the bottom. It works with the bootstrap .css file but
doesn't seem to work so great with some of the other looks/feels. I've
included the html for that portion as well and the site reference.
http://developer.telerik.com/featured/announcing-support-for-kendo-ui-mobile-with-angularjs/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
body, html {
padding: 0px;
margin: 0px;
font-family: Tahoma, sans-serif;
}
.header {
position: fixed;
top: 0;
height: 100px;
width: 100%;
z-index: 1030;
}
.content {
padding-top: 50px;
height: 100%;
}
.footer
{
position: fixed;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
margin-bottom: 0;
}
.footer, .push
{
height: 4em;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
<div kendo-layout data-id="viewbinding">
<header data-role="header" class="header">
<div kendo-mobile-nav-bar>
<div kendo-mobile-view-title>NDB Casenotes</div>
<button kendo-mobile-button data-align="left">Back</button>
</div>
</header>
<div class="wrapper">
<div class="content" ng-view=""></div>
<!-- </div> -->
<div class="push"></div>
</div>
<div data-role="footer" class="footer">
<div kendo-mobile-tab-strip
k-on-select="tabstripSelect(kendoEvent.item)">
<a href="#/casenote" data-icon="compose">Casenote</a>
<a href="#/participants"
data-icon="contacts">Participant</a>
<a href="#/goalsobjectives"
data-icon="organize">Goals/Objs</a>
<a href="#/activities" data-icon="action">Activities</a>
</div>
</div>
</div>
On Wednesday, August 13, 2014 3:58:04 PM UTC-5, Aaron Lind wrote:
> Is there an example of how to setup up a Kendo UI navbar and tabstrip so
> they anchor at the top and bottom of the page with a listview between. My
> setup below for a SPA always scrolls as far as it needs instead of
> anchoring for an app like appearance. Does the ng-view not play well with
> setting this up? I can duplicate with strictly kendo but not with
> angular. Any help would be greatly appreciated.
>
> PARTIAL
>
> <div class="container">
>
>
>
>
>
> <ul kendo-mobile-list-view k-data-source="clients" k-template
> ="clienttemplate" k-append-on-refresh="true" k-pull-to-refresh="true"></ul
> >
>
>
>
>
>
> <script type="text/x-kendo-template" id="clientViewTemplate">
>
> <div>#= last_name # </div>
>
>
>
> </script>
>
>
>
>
>
> </div>
>
>
> MAIN FORM
>
> <!DOCTYPE html>
>
> <html xmlns="http://www.w3.org/1999/xhtml"; ng-app="casenote_app">
>
> <head>
>
> <title></title>
>
> <meta name="viewport" content="initial-scale=1, maximum-scale=1,
> user-scalable=no, minimal-ui"/>
>
> <!-- Makes your prototype chrome-less once bookmarked to your phone's home
> screen -->
>
> <meta name="apple-mobile-web-app-capable" content="yes"/>
>
> <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
>
> <link href="content/kendo/2014.2.716/kendo.bootstrap.mobile.min.css" rel
> ="stylesheet" type="text/css"/>
>
>
> <script src="scripts/jquery-1.9.1.js"></script>
>
> <script src="scripts/angular.js"></script>
>
> <script src="scripts/kendo/2014.2.716/kendo.ui.core.min.js"></script>
>
> <script src="scripts/kendo/2014.2.716/kendo.angular.min.js"></script>
>
> <script src="scripts/angular-route.js"></script>
>
>
>
> </head>
>
> <body>
>
> <div kendo-layout data-id="viewbinding">
>
> <header data-role="header">
>
> <div kendo-mobile-nav-bar>
>
> <div kendo-mobile-view-title>NDB Casenotes</div>
>
> <button kendo-mobile-button data-align="left">Back</button>
>
> </div>
>
> </header>
>
>
> <div ng-view="" <font
> ...
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
