Attached is the code.
The buttons and other stuff is aligned OK, but for some reason I cannot get the inputs (event and screening) to align to the left.
I have tired all of the styles but to no avail.
Here is a jsfiddle link
http://jsfiddle.net/7WVqL/170/
And the source is below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="validate" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
</head>
<body>
<!-- Validation Tab Page -->
<div data-role="view" id="validatetab" data-title="Validate" data-layout="mobile-tabstrip">
<!-- Venue selection -->
<ul id="venue" data-role="listview" data-style="inset">
<li style="height:40px">
<a href="app/venue.html" class="button" id="venue-button" data-role="button" type="button">Select a Venue</a>
</li>
<li style="height:40px">
<input id="venuevalue" type="text" disabled="true" placeholder="Venue"></input>
</li>
</ul>
<!-- Screening selection -->
<ul id="screening" data-role="listview" data-style="inset">
<li style="height:40px">
<a href="app/screening.html" class="button" id="screeninge-button" data-role="button" type="button">Select a Screening</a>
</li>
<li style="height:40px">
<input id="screeningvalue" type="text" disabled="true" placeholder="Screening"></input>
</li>
</ul>
</div>
<!-- Screening Info Tab Page -->
<div data-role="view" id="infotab" data-title="Information" data-layout="mobile-tabstrip">
<ul id="infolist" data-role="listview" data-style="inset"></ul>
</div>
<script type="text/x-kendo-template" id="infotemplate">
<p class="listvalue">#:infoName#</p>
</script>
<!-- Tab Strip -->
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button" data-role="backbutton" data-align="left" href="app/logon.html">Logout</a>
<span data-role="view-title"></span>
<a data-role="button" type="button" data-align="right" data-icon="about" href="app/about.html"></a>
</div>
</header>
<p>TabStrip</p>
<div data-role="footer">
<div data-role="tabstrip" id="tabstrip">
<a href="#validatetab" data-icon="toprated">Validate</a>
<a href="#infotab" data-icon="info">Information</a>
</div>
</div>
</div>
<!-- Styles specific to page -->
<style scoped>
.listvalue
{
float: left;
font-size: medium;
line-height: .5em;
}
</style>
</body>
</html>
2 Answers, 1 is accepted
The specificity of the input positioning in Kendo UI Mobile is slightly higher due to all the :not() selectors that are used to avoid clashes with other elements (a glaring omission in CSS spec - :not() shouldn't have specificity). So, if you add an ID to the body and use it to boost the specificity of the selector, it will work (or you can just use !important). I updated the jsFiddle below:
Kind regards,
Kamen Bundev
the Telerik team
Rank 2