Clever Geek Handbook

Ionic custom component overlapping content

I have created a custom component that displays the footer (so that it has the same word on it). This code:

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

And the 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 would like to use it in pages, so:

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

This works, I mean footers, but the problem is that it overlaps the content (the rest of the elements in the footer and cannot scroll).

But when I write a page like this:

<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 works, the list scrolls, nothing overlaps.

+3


source to share


1 answer


As you can see in this SO answer , it looks like using custom components for the navbar or footer can lead to some errors as it can affect what the height is calculated ion-content

.

That being said, one way to fix your problem would be to place your custom component inside an element ion-footer

so that Ionic can calculate the height of the content, since there is an ionic footer and you can still change the content of all footers by simply updating your custom component :



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


source






More articles:


All Articles