Ionic-framework: ion-content does not resize when header or footer or not direct sibblings

[Remco75]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ x] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I Have a footer I want to appear on all pages, with some navigation and a custom component in it. To achieve this I placed it in the app.html, below the ion-nav. In my page templates I place a ion-content element.

Problem: the content height is not adjusted to correct for the footer. (I looked in the content-component code, and it expects them to be sibblings).

Expected behavior:
I would expect the content-component to resize even if header or footer are NOT sibblings

Steps to reproduce:
Create a app with uses ion-nav.
in app.html



My static footer content

in somepage.html


My App

My content

For Ionic issues - http://plnkr.co/edit/cpeRJs?p=preview
-->

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

[AmitMY]

It does it with tabs, but correct, not if the footer is not a sibling. However, can you try to put your <ion-nav inside ion-content? I know it is a bit weird, but it might solve it for you.

[Remco75]

@AmitMY thanx for the reply!
I think your solution would create new problems: I want the footer NOT to move during page transitions, and always be visible.
Putting the whole

[AmitMY]

ahm no, it would mean that the footer will stay in place, and the navigation will be inside a content that has margin-bottom: footer-height (automatically). I think it will work (because of the absolute nature of things), I have experimented with several contents in the past, pretty delicate stuff.

so try this out:

<ion-content>
  <ion-nav [root]=rootPage></ion-nav>
</ion-content>
<ion-footer>
  YOUR FOOTER
</ion-footer>

[Remco75]

Hmm Ii will start experimenting. Hard part is that i do not want the Whole page to scroll. There is a header in the page as well. I think this way the whole nav will be scrollable.

[AmitMY]

Technically, the whole nav will be scrollable, but it's height is 100% so your can't scroll it. Also, the header is top:0 absolutely, so it's fine.
The only side effect I can think of is ios bounce of the nav.

A different solution would be to set ion-nav with margin-bottom of the height of the footer (manually), which probably will solve your issue, and not cause any more.

Here is some mock code, I do not remember the correct methods and can't check at the moment
```
@ViewChild(IonFooter) footer: IonFooter;
....
renderer.style(this.nav.getElement, 'margin-bottom', this.footer.getElement.height)
````

[Remco75]

Cool, I was working on something similar already, thnx! Would be nice if ion-content would be able to account for scenarios like this though.

[Remco75]

@AmitMY your first solution seems to work for now, only down side is now i have nested ion-content elements. So double scrollbars show up-> will leave it for now to see what the app does on true devices.

Other solution works as well, with some workaroud, but it feels like adding to much overhead.
Still think this is a valid 'bug' , or maybe a feature request if this line of UI is not supported yet?

[AmitMY]

So technically second solution adds less overhead, because first solution does the same, and much much more.
It is not a bug, as this was not intended to work like this, however, it may be a feature request, although I doubt it will get in.

@jgw96 can rule on that

[Remco75]

ok, But i think it makes sence as a feature request: atm you cannot create a app with a static footer like described in this issue. (and is is a frequently used model, look at the spotify app for instance)

thnx for all the swift responses and help!

[davec21]

Not sure if this has anything to do with it.. but make sure you wrap your footer content in an this will fix height issues.

[jgw96]

Hello everyone! I am not going to consider this as a feature request at the moment as in this case ion-footer is working like it should and this use case seems to be very custom to your app. ion-footer should always be a sibling to ion-content as that is how the content figures out how to size its scrollable area. In this case it sounds like to me that if you want a static "footer" on each page of your app that you would be better served by using an ion-toolbar in your app.html and using position: fixed and bottom: 0 to make it stick to the bottom. You will probably need some custom css to size your content correctly too.

[Remco75]

Yeah I know how to fix this, But still I think it is a valid use-case to want a 'static footer' (for lack of a better word ;-)

And thats something that's not very easy to do: you have to re-build the ion-content in order to get the same flexibility: resizing on DOM height changes.

So i think it would be a nice addition to the ion-content component to be able to tell it to what element it should 'listen'.

But then again, who am I ? ;-)

thnx again guys!
remco

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.