rf_96_rf rf_96_rf - 3 years ago 123
CSS Question

Ionic custom component overlapping content

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 Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download