Making content scrollable


#1

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?


#2

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.


#3

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.)


#4

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>

#5

Right. I got it to work using directives, but my question is, how would you do it without directives.


#6

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>

#7

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…)


#8

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…