Navigation display issue

by RodEsp

HTML

<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.mobile.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<div id="v1" data-role="view" data-layout="mobile-view" data-model="viewModel" data-title="Groups">
    <ul id="lv1" data-bind="source:groupSource, click: selectGroup" data-role="listview" data-style="inset" data-template="t1">
    </ul>
</div>
<script id="t1" type="text/x-kendo-template">
    <a>${Name}</a>
</script>

<div data-role="view" id="v2" data-layout="mobile-view" data-model="viewModel" data-title="People">
    <label id="t">Title</label><label id="n">Name</label>
    <ul id="lv2" data-bind="source:peopleSource" data-role="listview" data-style="inset" data-template="t2"></ul>
</div>
<script id="t2" type="text/x-kendo-template">
    <label style="float:left">${Person.Job.Title}</label>
    <label style="float:right">${Person.PersonalInfo.Name}</label>
</script>

<!--default mobile settings-->
<div data-role="layout" data-id="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </header>
</div>

CSS

#t {
    float:left;
    margin-top:35px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#n {
    float:right;
    margin-top:35px;
    -webkit-transform: rotate(-270deg);
    -moz-transform: rotate(-270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

JavaScript

var app;

$(document).ready(function() {
    //Start the mobile application
    app = new kendo.mobile.Application($(document.body), { 
        transition: "slide"
    });
});

$.mockjax({
    url: 'data',
    responseTime: 0,
    responseText: [
        {
            "Name": "Pirates",
            "People": 
            [
                {
                    "Person": {
                        "PersonalInfo": {
                            "Name": "Jack Sparrow"
                        },
                        "Job": {
                            "Title": "Captain"
                        }
                    }
                },
                {
                    "Person": {
                        "PersonalInfo": {
                            "Name": "Jack the Monkey"
                        },
                        "Job": {
                            "Title": "Immortal Monkey"
                        }
                    }
                }
            ]
        },
        {
            "Name": "Citizens",
            "People": 
            [
                {
                    "Person": {
                        "PersonalInfo": {
                            "Name": "William Turner"
                        },
                        "Job": {
                            "Title": "Blacksmith"
                        }
                    }
                },
                {
                    "Person": {
                        "PersonalInfo": {
                            "Name": "Elizabeth Swann"
                        },
                        "Job": {
                            "Title": "Lady"
                        }
                    }
                }
            ]
        }
    ]
});

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "data",
            type: "GET",
            dataType: "json"
        }
    }
});
var viewModel = kendo.observable({
    goToView1: function() {
       ...