Ввод скользит внизу Android -клавиатуру, когда добавляется новый Div ⇐ Javascript

[Anonymous]

Пример на Stackblitz < /p>
В моем минимальном примере, когда новое «typing ...» div добавляется в DOM, входной вход, немного скрываясь за клавиатурой Android Полем Вот GIF, показывающий это, смотрите чуть выше ввода, когда появляется Div Typing, и вход спускается вниз по клавиатуре:-< /p>

Есть ли в любом случае, чтобы убедиться, что ввод остается на его месте? Мне нужно убедиться, что тексты появляются сверху вниз. Я пробовал все, вместо того, чтобы использовать Levify-end, я пытался использовать маржинальный верхний автомат, Flex Col Reverse, вращение 180, но все они дали ту же проблему. Я также попытался добавить набор текста. Как часть самого массива внутри цикла FOR, но он работал частично, то есть, когда сообщение получено от партнера, которое он работает Та же проблема .. < /p>
Я использую Tailwind, но любое решение, использующее что-то, отлично- погода, это простой CSS или JavaScript. < /p>
Почему это происходит ? Почему это не происходит, когда DOV добавляются через @for Loop, но это происходит, когда DIV добавляется с условием @IF? Он работает нормально, если я заставляю DIV появляться сверху вниз (пример не использует Jusifty-end). < /P>
также боковой вопрос- значок отправки в правом нижнем углу клавиатуры появляется как значок поиска Потому что я добавил тип ввода в качестве поиска. Но если я изменю его, чтобы написать, что управление паролем начинает появляться поверх ввода, как описано в этом вопросе. Есть ли способ изменить этот значок на «Отправить стрелку»? /p>


Banner



@if (showElement) {
...typing
}
@for (message of messages(); track $index) {
{{ message }}
}





< /code>
App.component.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 {

showElement = false;

messages = signal([]);

intervalId: any;
intervalId2: any;

counter = 1;

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

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

setInterval(() => {
this.intervalId2 = this.showElement = !this.showElement;
}, 1000); // Toggles every second
}
}

ngOnDestroy() {
if (this.intervalId) {
clearInterval(this.intervalId); // Cleanup to prevent memory leaks
}
if (this.intervalId2) {
clearInterval(this.intervalId2); // Cleanup to prevent memory leaks
}
}
}
< /code>
app.component.scss
.normal-text {
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
}
< /code>
styles.scss
/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;


Подробнее здесь: https://stackoverflow.com/questions/794 ... dded-above