Angular- Ввод, скрытый за ключевым словом телефонов при добавлении нового сообщения ⇐ CSS

[Anonymous]

Пожалуйста, не отметьте это как дубликат, я пробовал другие решения, и их ответы не работали, и это не то же самое. можно увидеть в приведенном ниже GIF, но в последующих фокусах ввод начинает прокручивать вниз при добавлении новых сообщений:-

демонстрация с использованием удаленного отладчика:-

strong> app.componnent.ts
import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, signal } from '@angular/core';

@Component({
selector: 'app-root',
imports: [],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit, OnDestroy {

messages = signal([]);

intervalId: any;

counter = 1;

constructor() {}

ngOnInit(): void {
this.intervalId = setInterval(() => {
this.messages.set([...this.messages(), 'test'+this.counter++]);
}, 2000);
}

ngOnDestroy() {
if (this.intervalId) {
clearInterval(this.intervalId); // Cleanup to prevent memory leaks
}
}
}


App.component.html




Banner









@for (message of messages(); track $index) {



{{ message }}



}









Submit











App.component.scss>.container {
display: flex;
flex-direction: column;
height: 100dvh;
background-color: yellow;
}

.header {
min-height: 1rem;
display: flex;
align-items: center;
position: sticky;
top: 0;
background-color: burlywood;
}

.screen {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
}

.messages {
display: flex;
flex-direction: column-reverse;
gap: 1rem;
padding: 0.5rem;
flex: 1;
overflow-y: auto;
}

.message {
display: flex;
}

.message-inner {
background-color: aqua;
padding: 0.5rem;
}

.controller {
display: flex;
gap: 1;
margin-bottom: 0.25rem;
position: sticky;
bottom: 0;
}

.controller-form {
display: flex;
gap: 1;
}

.controller-input {
display: flex;
flex-grow: 1;
border: 2px;
justify-self: center;
padding: 0.25rem;
}

styles.scss
body {
margin: 0;
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... e-is-added