Все тексты переходят в верхнюю часть экрана на странице чата.

Question

У меня есть страница пользовательского интерфейса чата, где пользователи могут отправлять текстовые сообщения друг другу, но проблема, например, в том, что когда пользователь X отправляет текст, он идет вверх, а когда пользователь Y отвечает, текст должен находиться под текстом, отправленным пользователем.X, но нет, он также идет вверху над текстом, который был отправлен пользователем X, не знаю, почему он это делает

вот мой код

<StackLayout>

<ListView height="90%" margin-bottom="50" padding="5" #list [items]="chats$ | async">

    <ng-template let-item="item">

        <GridLayout columns="*" rows="auto" class="msg">

            <StackLayout [class]="filter(item.from)" orientation="horizontal" [horizontalAlignment]="align(item.from)">

                <Image [visibility]="showImage(item.from)" class="authorimg" stretch="aspectFill" height="30" width="30" verticalAlignment="top" src="~/images/k1.png" col="1"></Image>

                <Label [text]='item.message' class="msg_text" textWrap="true" verticalAlignment="top"></Label>

            </StackLayout>

        </GridLayout>

    </ng-template>

</ListView>



<StackLayout #chatbox height="10%">

    <GridLayout columns="*,auto" style="padding: 10">

        <TextField #textfield class="chatTextField" row="0" col="0" [(ngModel)]="message"></TextField>

        <Button #btn class="chatBtn" row="0" col="1" text="send" (tap)=chat(message)></Button>

    </GridLayout>

</StackLayout>

Answer 1

введите описание изображения здесь вот примечание на скриншоте: пользователь X отправил 'HI', затем пользователь y ответил 'Привет' и так далее

Answer 2

Ваш StackLayout css должен быть добавлен с кодом ниже

<classname> {
    display: block;
}

Когда вы дадите это, сообщения не будут перекрываться.И это займет всю ширину родительского элемента.