Ionic 4: Set text at bottom of

@kzamo wrote:

Hi everyone!

This is something that I had already managed to do in Ionic 3, but now I’m in trouble to implement same design in Ionic 4. Let me to explain more with this image

image.png1315×607 55 KB

As the title says, I need to set text (or any other element) always at the bottom of page, but this text must comply with both scenarios:

Scenario 1: If the upper content has less height than the viewport, my lower content should always be at the end of the viewport.

Scenario 2: If the upper content has the same or more height than the viewport, my lower content should not overlap the upper content, instead, it should be below of this, so the lower content will be visible only when user scrolls down.

Set the lower content inside <div slot="fixed"> or <ion-footer> do not help since they would cause this content to overlap the upper content when the latter has too much height.

In ionic 3 I implemented previous behavior in this way:

HTML

<ion-content>
  <div class="upper-content">
    ...
  </div>
  <div class="lower-content">
    <p>&copy; 2019 All Rights Reserved</p>
  </div>
</ion-content>

CSS

.scroll-content {
  display: flex;
  flex-direction: column;
}

.lower-content {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

But I can not operate this code or similar ones in Ionic 4. I appreciate any suggestions that you can give me

Posts: 1

Participants: 1

Read full topic