Making content scrollable


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>

and then a corresponding footer at the bottom:

<div class="bar bar-footer bar-balanced">
<div class="title">Footer</div>

On the inside, I put


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">

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-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-footer-bar class="bar-positive">
  <h1 class="title">footer</h1> 


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

<div class="scroll-content has-header has-footer overflow-scroll">
        <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>


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

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…