Hi there ! I’m creating an app which contains a chat functionality and I’m trying to implement the scrollToBottom() function when I reach my chat page and my messages are loaded. Here’s what I’ve done so far: <ion-content [scrollEvents]="true"> <div class="messages-container" *ngIf="connectedUs…

Oh god I managed to find the solution. It was CSS related ! :astonished: Just changed this: .messages-container { height: 100%; width: 100%; position: relative; display: flex; overflow: hidden; margin: 0 auto; } To: .messages-container { min-height: 100%; width: 1…

Sure, HTML first and then TS file. Some text are French but don’t mind it :wink: <ion-header> <ion-toolbar mode="ios"> <ion-buttons slot="start"> <ion-back-button [routerLink]="'/tabs/ma-messagerie'" defaultHref="ma-messagerie"></ion-back-button> </ion-buttons> <ion-title *ngIf=…

I also tried to do it in ionViewDidEnter instead of ngOnInit but the result is the same, no scrolling :confused: I really don’t know what I’m missing, it shouldn’t be that hard after all :face_with_monocle: EDIT: Even if I call updateScroll() when clicking on a button or when focusing my text inpu…

I also needed to set programatically the scroll to the bottom in my app, after some trouble I got it working, I’ve seen your code and I’m not really sure what’s wrong/missing, I’ll share everything I’ve done to get it working, mby it could help you in hml <ion-content [scrollEvents]=“true”> getti…

Hi guys ! I tried your fix 1 @SanduCuragau , but unfortunately, it doesn’t scroll. <ion-content [scrollEvents]="true"> @ViewChild(IonContent) content: IonContent; updateScroll() { console.log('should scroll here'); this.content.scrollToBottom(300); } ‘Should scroll here’ is logged, I can…

Hm, try 1 thing, add like random buttons or whatever out of your screen and create a legit need to scroll through the whole page and try to execute updateScroll() cuz I think what’s happening here is that in my case I used it to scroll legit the page itself, I didn’t get to try to understand your co…

I see what you mean but actually, my messages don’t fit my page because there is too much. I have something like 30 messages to test this functionality, so when I get on my chat page, I only see the 10 first messages, and I’d prefer to see the last 10 ones, just like Facebook Messenger or any other …

Yeah that’s the problem, your page normally fits well and you can’t scroll down on it, you wanna scroll down on the messages, to be honest I have no idea what to do to fix it 1- what if instead of subscribing to the IonContent you would subscribe to the component holding all the messages? 2- when …

1- I think this solution will work, I just have to search how to do it cause I have no idea :smile: 2- It didn’t affect the messages, they were still there and well shown EDIT: 1- Not sure if this solution will work after all, because I think scrollToBottom is an IonContent function :thinking:

remember how you used to ID ur ion-content? [image] and the ID went here try to do the same but with the div, if that doesnt work try the ol and if that doesnt work either try the li xD

this.content.scrollToBottom() is not a function :frowning: I don’t know how I can do it…

[IONIC 4] Scroll to bottom on chat page

Ionic Framework ionic-v3

SanduCuragau May 14, 2019, 8:31am 26

Hmm I faced something similar IONIC 4 click event bug, I have to double click?

Always man

Topic		Replies	Views
Ion-scroll scrollToBottom ionic-v3	19	15751	September 7, 2018
Could someone help me scrolling in a much better way? Ionic Framework	2	393	November 22, 2018
İonic ion-content scroll to bottom automatically ionic-v3	3	3796	November 27, 2018
Ionic Scroll Bottom ?* ionic-v3	30	42074	May 4, 2020
Scroll to bottom not working ionic-v3	0	841	July 24, 2019

[IONIC 4] Scroll to bottom on chat page

Related topics