ion-footer in custom component covers ion-content, hidden ion-toolbar in ion-header covers ion-content when revealed ionic2

[ghenry22]

Short description of the problem:

If you include an ion-footer element from a custom component then it will cover the ion-content at the bottom of the viewport. This worked correctly before beta10 when using toolbar position bottom. This behaviour is introduced along with the ion-footer element.

If you have a toolbar in the header under the nav bar which is exposed programmatically, when the toolbar is exposed it covers the top of the ion-content. This previously worked correctly before beta10 and the introduction of ion-header as the toolbar was just included before the ion-content.

Visible on all platforms and browser

What behavior are you expecting?

Ion-content should not be covered by the footer content or header content. An included custom component should work the same as the same html code does when in-line. The ion content area should shift down when a toolbar is programmatically exposed in the ion-header.

Steps to reproduce:

1. Grab any start project
2. Create a list long enough to scroll
3. Create a custom component called myfooter (which includes an ion-footer).
4. After the ion-content closing tag include myfooter component
5. scroll to bottom of list, the last items are under the footer.
6. add a button in the nav bar to show an extra toolbar(ie a searchbar)
7. add the toolbar inside ion-header with an ngIf statement which is switched by the button in 6 and hidden by default.
8. load the page, click the button, the toolbar covers the ion-content

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x
2.0beta10

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.11.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[brandyscarney]

From the beta 10 changelog:

The only elements that should be children of a page are ion-header, ion-content, and ion-footer.

We are only supporting the following structure:

<ion-header></ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>

[brandyscarney]

I added a resize function to content for the header issue. This will be in the beta 11 release. If you'd like to use it before then please try our nightly:

npm install [email protected]

Thanks!

[ghenry22]

ok cool,
Yep I read the supported structure bit. The issue is when part of that structure is included from an external component versus inline in the template.

I found a solution was to just leave the ion-footer container in the template and put my custom component with the rest of the footer content inside that. If this is the way to go then that is fine.

For now I have just shifted my searchbars into the nav bar which, while a pain, actually works pretty well. I will test the header handling with beta11 when it comes out though regardless.