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

[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>
также, если есть другой способ достичь такого типа макета, где сообщения появляются снизу Вверх, но эта проблема не возникает, пожалуйста, скажите. Спасибо!
, чтобы воспроизвести-
Нам нужно открыть клавиатуру при наборе .. Индикатор не виден Полем Если мы откроем его, когда индикатор набора типирования видим, его не произойдет. Значок, потому что я добавил тип ввода в качестве поиска. Но если я изменю его, чтобы написать, что управление паролем начинает появляться поверх ввода, как описано в этом вопросе. Есть ли способ изменить этот значок на «Отправить стрелку»? > app.component.html < /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;

update-
Использование решения, предложенного @c3roe в комментариях (если я понял правильно)- если я Прокрутите вверх, я прокручиваю вниз до нижней части сообщений, но индикатор печати все еще нажимает вход вниз по клавиатуре. Stackblitz этого примера прокрутки. Демонстрационный GIF:-

code updates-< /strong> < /p>
App.component.ts

Код: Выделить всё

import { isPlatformBrowser } from '@angular/common';
import { Component, ElementRef, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2, signal, ViewChild, viewChild } from '@angular/core';

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

// getting ref of the div that contains the messages / typing indicator
@ViewChild('messageContainer') messageContainer: ElementRef | undefined = undefined;

showElement = false;

messages = signal([]);

intervalId: any;
intervalId2: any;

counter = 1;

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

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;
if(this.showElement) {
if(this.messageContainer) {
// scrolling the div down
let elem = this.renderer.selectRootElement(this.messageContainer)?.nativeElement;
// = 0 because column is in reverse
elem.scrollTop = 0;
}
}
}, 1000);
}
}

ngOnDestroy() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
if (this.intervalId2) {
clearInterval(this.intervalId2);
}
}
}
< /code>
App.component.html


Banner




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

update [/b]
Добавить GIF возможное изменение размера в Chrome Demote Debugger:-


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