CSS header overlapping content

ionic-v1
1

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!

2

Ok I figured out the header thing. It turns out I need to wrap all of my content in <div class="content has-header">. This made sure the header didnt overlap the content. However, it had another side effect of cutting off the bottom of the content. I inspected the rules being applied and it looks like the content gets set to position:relative; and top:44px; in order to move the content down. Fine, but the content is still being cutoff since only the position was moved, so I had to add .has-header { margin-bottom:44px; } to fix that. Although this still cut off a drop-shadow effect I had on one of my content elements at the bottom of the page. So I changed it to margin-bottom:100%; to fix that. Weird, I really feel like I shouldnt have to put in a hack like this to get it to work as expected. Maybe Im missing some functionality since Im only using the CSS stuff?

In any case, I still cant scroll my content. On one page its a list with a lot of list items, and I tried setting several scroll classes to both the content div and the list div, to no effect. Anything Im missing there?

Also, my labels still dont float as expected. Totally baffled, I think Ill just switch to normal labels if I cant get that figured out. Anyone else have that problem?

Thanks!