Messed components after some scrolling


#1

Some of my ListView components get messed after some scrolling down and up (see before and after):

Actually it’s just that red label. And I saw a strange spacing with the number on the left of it too, sometimes.
Also, I don’t handle any special events in the page, concerning scrolling.

Here is my template:

<ActionBar title="Caixa" class="action-bar"></ActionBar>

<GridLayout rows="* ,auto" columns="*">
    <ListView [items]="myList" row="0" col="0">
        <ng-template let-item="item">
            <Ripple [nsRouterLink]="[item?.tipo == 'ABC' ? '/abc' : '/def', item.proto]">
                <StackLayout orientation="vertical" class="caixa-entrada-item-container">
                    <GridLayout columns="*, auto, auto">
                        <Label [text]="item.logra" col="0"></Label>
                        <Label [text]="item.numero" col="1"></Label>
                        <Label [text]="item.status" class="caixa-entrada-item-status white-text" style="background-color: red; margin-left: 3" col="2" 
                            horizontalAlignment="center" textWrap="true"></Label>
                    </GridLayout>
                    <Label [text]="item.tipos"></Label>
                    <GridLayout columns="auto, *, auto">
                        <Label [text]="item.proto" col="0" style="margin-right: 10"></Label>
                        <Label [text]="item.tipo" col="1"></Label>
                        <Label [text]="item.dt | date:'dd/MM/yyyy'" class="caixa-entrada-item-date gray-text" textAlignment="right" col="2"></Label>
                    </GridLayout>
                </StackLayout>
            </Ripple>
        </ng-template>
    </ListView>

    <StackLayout class="light-blue actions" orientation="horizontal" horizontalAlignment="center" row="1" col="0" width="100%" height="50">
        <Button class="white-text" [text]="'Ir'" (tap)="ir()"></Button>
    </StackLayout>
</GridLayout>

I also tried to remove Ripple, but not his fault.

Any ideas?

Thanks!


#2

I have a feeling that your styles are getting messed up as you scroll. Can you change your inline style (margin-right: 10) to be handled by an external style sheet? This is just a guess.

Another idea would be to make your columns fixed in width, perhaps to 33% each instead of auto, *, auto


#3

Hey @jen.looper,

I followed your suggestions, no luck:

It starts nice like before, but when I start to scroll, it get messed. Please notice that there’s a label of the width of that “messed label”, as you can see in the previous image. Seems that somehow the “Nova” ones are assuming the width of “Pendente” ones.

New layout:

<ActionBar title="Caixa" class="action-bar"></ActionBar>

<GridLayout rows="* ,auto" columns="*">
    <ListView [items]="myList" row="0" col="0">
        <ng-template let-item="item">
            <Ripple [nsRouterLink]="[item?.tipo == 'ABC' ? '/abc' : '/def', item.proto]">
                <StackLayout orientation="vertical" class="caixa-entrada-item-container">
                    <GridLayout columns="40*, 35*, 25*">
                        <Label [text]="item.logra" col="0"></Label>
                        <Label [text]="item.numero" col="1"></Label>
                        <Label [text]="item.status" class="caixa-entrada-item-status white-text" style="background-color: red;" col="2" 
                            horizontalAlignment="center" textWrap="true" textAlignment="center"></Label>
                    </GridLayout>
                    <Label [text]="item.tipos"></Label>
                    <GridLayout columns="auto, *, auto">
                        <Label [text]="item.proto" col="0" class="caixa-entrada-item-proto"></Label>
                        <Label [text]="item.tipo" col="1"></Label>
                        <Label [text]="item.dt | date:'dd/MM/yyyy'" class="caixa-entrada-item-date gray-text" textAlignment="right" col="2"></Label>
                    </GridLayout>
                </StackLayout>
            </Ripple>
        </ng-template>
    </ListView>

    <StackLayout class="light-blue actions" orientation="horizontal" horizontalAlignment="center" row="1" col="0" width="100%" height="50">
        <Button class="white-text" [text]="'Ir'" (tap)="ir()"></Button>
    </StackLayout>
</GridLayout>

#4

how about setting a fixed width to the red button?


#5

Setting fixed width solves the problem, but I have the feeling that something is bugged somewhere, or I didn’t followed the best practices…or I did hit some framework limitation, but I can’t tell which of those is true :slight_smile:


#6

@pana Panayot, is there a better workaround?


#7

I have the same issue.

Everything was working properly when I had just one template for the ListView and some ngIfs there to handle its content. Width the lack of performance I tried to move to multiple ng-templates and then I got the same issue.

In my case this happens in a ListView of a chat message page, so the width will change according to the message width

The last image shows the initial state

ListView

<ListView #chatBox [items]="this.messages" [itemTemplateSelector]="templateSelectorCallback">
    <ng-template let-item="item" nsTemplateKey="mine">
        <MessageMine [message]="item"></MessageMine>
    </ng-template>
    <ng-template let-item="item" nsTemplateKey="other">
        <MessageOther [conversation]="conversation" [message]="item"></MessageOther>
    </ng-template>
</ListView>

MessageMine:

<GridLayout rows="auto, auto" columns="auto, auto" class="container" horizontalAlignment="right" borderColor="red" borderWidth="2">
    <TextView row="0" col="0" colSpan="2" class="text" [text]="message.text" textWrap="true" [editable]="false" borderColor="green" borderWidth="2"></TextView>
    <Label row="1" col="0" [text]="message.time_stamp | unixDate"></Label>
    <ActivityIndicator row="1" col="1" *ngIf="message.pending" busy="true" marginLeft="10" class="activity-indicator" width="10" height="10"></ActivityIndicator>
</GridLayout>