Error with scrollToBottom : Footer overlaps Content

@Antoine33000 wrote:

Hi,
I have an issue with the scrollToBottom method of the ion-content.
I’m trying to develop some kind of chat, with a bottom scrolling as messages are received.
The problem is that my footer overlaps the ion-content.
I can’t see the latest message, only the one before.

Here is my chat-page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Chat</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar>
    <ion-grid no-padding>
      <ion-row>
        <ion-col size="3">
          <ion-item lines="none">
            <ion-label>Login</ion-label>
          </ion-item>
        </ion-col>
        <ion-col size="7">
          <ion-item lines="none">
            <ion-input type="text" [(ngModel)]="nickname" placeholder="Enter a nickname" (keyup.enter)="sendMessage()"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col size="2">
          <ion-button expand="block" (click)="joinChat()" [disabled]="(!nickname || nickname == '')">OK</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
  <div style="height:3px;background-color:blue;"></div>
</ion-header>


<ion-content>

  <ion-list>
    <ion-card *ngFor="let msg of chatMsgs">
      <ion-card-header>
        <ion-card-subtitle>{{msg.from}}</ion-card-subtitle>
        <ion-card-title>{{msg.content}}</ion-card-title>
      </ion-card-header>
    </ion-card>

  </ion-list>
</ion-content>

<ion-footer>
  <div style="height:3px;background-color:blue;"></div>
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col size="9">
          <ion-item lines="none">
            <ion-input type="text" [(ngModel)]="chatMessage" placeholder="message" (keyup.enter)="sendMessage()"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col size="3">
          <ion-button expand="block" (click)="sendMessage()" [disabled]="(!chatMessage || chatMessage == '')">Send</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>

The method I use to scrollToBottom is:

this.chatMsgs.push(data);
this.content.scrollToBottom();

(with   @ViewChild(Content) content: Content;)

Here is my config:
ionic (Ionic CLI) : 4.3.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.16
@angular-devkit/build-angular : 0.10.6
@angular-devkit/schematics : 7.0.6
@angular/cli : 7.0.6
@ionic/angular-toolkit : 1.2.0

Thanks in advance,
Antoine

Posts: 1

Participants: 1

Read full topic