Kendo UI Mobile base
HTML
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.mobile.all.min.css">
<div data-role="view" id="foo">
<h1>Stand alone link</h1>
<a href="#linkToView" >
<div class="container">
<div class="status">
<!-- snipped for brevity -->
</div>
<div class="content">
<div>line 1</div>
<div>line 2</div>
<div>line 3</div>
<div>line 4</div>
</div>
</div>
</a>
<h1>Same code in a listview</h1>
<ul data-role="listview">
<li>
<a href="#linkToView" >
<div class="container">
<div class="status">
<!-- snipped for brevity -->
</div>
<div class="content">
<div>line 1</div>
<div>line 2</div>
<div>line 3</div>
<div>line 4</div>
</div>
</div>
</a>
</li>
</ul>
</div>
CSS
.container {
display: -webkit-box;
-webkit-box-pack: start;
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-pack: start;
-moz-box-align: stretch;
-moz-box-orient: horizontal;
display: box;
box-pack: start;
box-align: stretch;
box-orient: horizontal;
padding: 0 !important;
display: -webkit-flex !important;
display: flex !important;
-webkit-align-items: stretch;
align-items: stretch;
-moz-box-direction: normal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.container > * {
padding: 5px;
}
.container .content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.container .content div {
width: 100%;
}
.status{ /* for illustration purposes change background color so you can see it */
background-color: #999;
width: 50px;
}
JavaScript
new kendo.mobile.Application();