Ionic custom component overlapping content

Question

I created custom component, which is showing footer (need to have same footer on many pages). That's code of it:

<ion-footer class="fh">
  <ion-toolbar>
    Footer
  </ion-toolbar>
</ion-footer>

And CSS:

.fh .toolbar-background{
  background-color: blue;
}

.fh ion-toolbar{
  min-height: 15em;
  height: auto;
  max-height: 20em;
}

For example , this component named footer-h

I'd like to use it in pages, so:

<ion-header>
...
</ion-header>
<ion-content padding>
<ion-list>
...
</ion-list>
</ion-content>
<footer-h></footer-h>

It works, i mean footer shows, but there is problem that it's overlapping content (rest of items on list under footer and can't scroll).

But when I'll write page like that:

<ion-header>
...
</ion-header>
<ion-content padding>
<ion-list>
...
</ion-list>
</ion-content>
<ion-footer class="fh">
  <ion-toolbar>
    Footer
  </ion-toolbar>
</ion-footer>

everything is working, list is scrollable, nothing is overlaps.

Answer 1

Just like you can see in this SO answer, it seems like using custom components for the navbar or the footer may lead to some bugs, since it may affect the way the height of the ion-content is calculated.

That being said, one way to fix your issue would be to place your custom component inside of the ion-footer element, so that Ionic could calculate the height of the content since the ion-footer is there, and you can still modify the content of all the footers by just updating your custom component:

<ion-footer>
  <ion-toolbar>
    <!-- ...yourComponentHere... -->
  </ion-toolba‌​r>
</ion-footer>