Ionic 4: Set text at bottom of <ion-content>

Ionic Framework ionic-v3
1

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
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

2 Likes
2

Hi, Do you find any solution ?

3

Hi,

Today, finally, I found a workaround

I enclosed divs upper-content and lower-content within a <div class="scroll-content"> just like this:

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

Then, I copied previous Ionic 3 scroll-content div style from browser console into my page stylesheet

.scroll-content {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    contain: size style layout;
    display: flex;             // added by me
    flex-direction: column;    // added by me
}

Works like a charm!

5 Likes
4

Exactly…Works like a charm…Most accurate solution one can find.And thank you so much for it.

5

Thank you very much :+1: :+1: :+1:

6 
<!-- Footer without a border -->
  <ion-footer class="ion-no-border">
    <ion-toolbar>
      <ion-title>Footer - No Border</ion-title>
    </ion-toolbar>
  </ion-footer>
7

Thank you very much!

8

Thank you very much, Work like a charm