I’m slowly going through the docs and am focusing - at first - not on the directives - and I noticed something. If I use
<div class="bar bar-header bar-positive">
<h1 class="title">bar-stable</h1>
</div>
and then a corresponding footer at the bottom:
<div class="bar bar-footer bar-balanced">
<div class="title">Footer</div>
</div>
On the inside, I put
<p>foo</p>
If I repeat this block about 50 or so times (lame, I know), the content correctly lies inside the header and footer, but I am unable to scroll the content. I figure if I switch to the angular directives it will work just fine, but the impression I got was that I didn’t need to. Was the impression wrong?
Hmm. Something seems wrong. Above my first paragraph I added
<button class="button button-assertive">
button-assertive
</button>
and it renders behind the header. So I’m doing something wrong.
Ok, so I discovered if I wrap my content with
<div class="content has-header has-footer padding">
It doesn’t scroll, but it renders right on top anyway, but I’m not seeing where this is documented. It should be in the CSS area. (And I still can’t scroll.)
Hey @raymondcamden, I notice you from your blog!
So basically your using the pure css for your layout instead of using the directives
<ion-header-bar class="bar-positive">
<h1 class="title">{{myTitle}}</h1>
</ion-header-bar>
<ion-content class="padding">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quasi ea voluptatibus similique quia quaerat impedit natus aperiam dolorem et animi vero eaque qui magni temporibus. Animi facilis quasi veritatis.</h2>
</ion-content>
<ion-footer-bar class="bar-positive">
<h1 class="title">footer</h1>
</ion-footer-bar>
Right. I got it to work using directives, but my question is, how would you do it without directives.
Ah just add the class overflow-scroll
http://codepen.io/mhartington/pen/nGjxd
<div class="scroll-content has-header has-footer overflow-scroll">
<h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima et quam atque earum dignissimos placeat numquam delectus id facere! Aliquid perferendis est facere ipsa praesentium doloribus alias accusantium ea.</div>
</h1>
</div>
Confirmed - thank you! Is this documented anywhere? I didn’t see it. (But honestly I did that Developer thing where you skim for what seems important which is totally my own fault…)
It’s kind of covered here
http://ionicframework.com/docs/api/directive/ionContent/
But that just puts overflow-scroll
as an attribute, which if it’s true, angular will add that class and disable our js scroller. We should probably put this in our css docs…