How to create content above and below ion-content?

ionic-v1
1

Hey there… im starting with ionic really fresh… so forgive me the question…

I’m looking for a way to make three content blocks aligned vertically…
a top block containing several buttons, a middle block containing a dynamically growing / shrinking list,
and a bottom block which is fixed in size…

I only want the middle block (containing the dynamic list) to be scrollable … the top and bottom block should always be visible …

anybody knows how to do this in ionic ??
i tried the header- and footerbars … but there are other problems with them for me… and i thought i can’t be the only one, wanting to make a layout like this ,)

thanks a lot in advance
cheers, chris

2

update… ion-scroll seems to be the way to go for creating specific scrollable elements… as well as disabling the “pulldown” gesture on ion-content with has-bouncing=“false”…

3

As far as I’m aware, the only way to do this is to style your ion-content with css. It’s positioned absolutely having top: 0 (or 44px if it .has-header) and bottom: 0.

If you want to put something above (lets say 50 px high button bar) and below (lets say 80px high footer), you have to:

.your-header {
    position: absolute;
    top: 0;
    height: 50px;
}
.your-footer {
    position: absolute;
    bottom: 0;
    height: 80px;
}
.your-ion-content-class {
    top: 50px !important;
    bottom: 80px !important;
}

If you app has a header you have to add 44px to your top positions, ie. .your-header would have top:44px instead of 0.

On iPhone you sometimes have to account for status bar (the one with clock, etc.) as well - I’m still unsure when exactly this is needed but sometimes you get content displayed behind status bar and you have to shift it down.

If there’s a better way I’d love to know because this feels dirty and very fragile (what is header changes height in next version of OS or Ionic?).

The other way could be creating flexbox with 3 vertical sections and putting ion-scroll inside the middle one if ion-scroll does everything you need to do.