CODEWITHSUNDEEP
htmlcssionic2ionic3
Rafał Gołubowicz
Rafał Gołubowicz

Reputation: 660

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.

Upvotes: 3

Views: 2660

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

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>

Upvotes: 5

Related Questions