I am making a really small light-weight app and I don’t need any Angular functionality, nor do I want to use the command line, so I am only using the CSS components of Ionic for presentation. I simply downloaded the ZIP file and included ionic.css and ionic.js (though I’m not entirely sure this js file is needed in my case).
Here’s my code:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/ionic.css"/>
<script src="js/ionic.js"></script>
</head>
<body>
<div class="bar bar-header bar-stable">
<h1 class="title">bar-stable</h1>
</div>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
</label>
</div>
</body>
</html>
There are 2 problems with this: 1) The header bar overlaps the form stuff. 2) The labels don’t “float” when you start typing text like they do in the examples. Both elements were lifted exactly off the css components demos page. I haven’t edited a thing with them.
Does anyone know why my code doesn’t behave like the examples on the site? Am I missing something? Thanks!