Observable Array: Strange behavior inside a badge, text/numbers disappearing


#1

Hi!
I am facing an issue while using an ObservableArray binding to a Listview.

At a first glance, it works. But after touch (drag) the screen, the numbers inside the badges are randomly disappearing.

I just made a screen capture to show the problem: https://youtu.be/lhMLmIidoAg

  • Example: at 5th line (84 - C) you can see the number inside the badge: 89
  • So, a little scroll down touching the screen
  • Another scroll up
  • The badge is empty now. The number disppeared

So, while using the screen scrolling in a simple listview, the badge numbers toggle disappearing/appearing randomly.

What can I do?


#2

Would you mind sharing some code or creating a playground will be the best option to debug.


#4

Well, I am using the following structure:

<ListView items="{{ listaMenu }}" itemTap="abrirModulo">
   <ListView.itemTemplate>
       <GridLayout class="" columns="*, auto" rows="*">
           <StackLayout col="0" orientation="vertical" class="">
               <Label id="description" text="{{ descr }}" textWrap="true" />
               <Label id="name" text="{{ nome }}" />
           </StackLayout>
           <Label col="1" id="badge" text="{{snv}}" />
       </GridLayout> 
   </ListView.itemTemplate>
</ListView>

After some testing, I get rid from issue giving to Label[id=name] the property textWrap=true:

           <Label col="1" id="badge" text="{{snv}}" textWrap="true" />

Maybe it’s a layout problem on grid layout…
But for now it’s solved!

Regards.


#5

Follow up with final solution: changed from GridLayout to FlexboxLayout.

.badgeAmarelo{
    font-size: 18px;
    color: black;
    font-weight: bold;
    background-color: #f7bd00;
    padding-left:15px;
    padding-right:15px;
    border-radius: 50%;
    margin:25px 10px;
}
/* ------------------------------ */
<ListView.itemTemplate>
    <FlexboxLayout flexDirection="row" color="white">
        <StackLayout class="fonte20" flexGrow="1"> <!-- Pay attention to use of flexgrow -->
            <Label id="name" text="{{ nome }}"/>
            <Label id="description" text="{{ descr }}" class="cinza"/>
        </StackLayout>
        <Label id="name" text="{{snv}}" class="badgeAmarelo"/>
    </FlexboxLayout> 
</ListView.itemTemplate>

![Untitled|281x500](upload://uixt5DjJRL1M2DsbAdJ5nHFOMxg.png)