title: ListView Layout Issues While Scrolling
body: <p>In my Nativescript application I have built a ListView in which each list item contains a stack layout with a nested GridLayout. Here is an example of the XML.</p>
  
  <pre><code>    &lt;ListView  row="2" items="{{ measurements }}" id="measurement-list" loaded="" itemTap=""&gt;
          &lt;ListView.itemTemplate&gt;
              &lt;StackLayout&gt;
                  &lt;Label class="date-seperator" text="{{header | dateShortDate}}" textWrap="true" visibility="{{ header ? 'visible' : 'collapsed' }}"/&gt;
                  &lt;GridLayout columns="8,*,10,*" rows="*, *" class="{{'measurement-item trend-' + MeasurementColor}}"&gt;
                      &lt;Label class="{{'severity-' + MeasurementColor}}" col="0" rowSpan="2"  text="" /&gt;  
                      &lt;WrapLayout col="1" orientation="horizontal" itemWidth="" itemHeight=""&gt;
                          &lt;Label class="measurement-value" col="1" text="{{Value}}" /&gt;
                          &lt;Label id="trend-arrow" class="{{'sm-arrow-' + TrendArrow }}" col="1" /&gt;                                
                      &lt;/WrapLayout&gt;                                                                                               
                      &lt;Label class="measurement-uom"   col="1" row="1" text="mg/dl"/&gt;
                      &lt;Label class="measurement-time"  col="3" row="0" text="{{Timestamp | dateTimeStamp}}"/&gt;                
                  &lt;/GridLayout&gt;                    
              &lt;/StackLayout&gt;                 
          &lt;/ListView.itemTemplate&gt; 
      &lt;/ListView&gt; 
  </code></pre>
  
  <p>I'm having an issue though in which when I scroll the list view the layout of list items begins to distort and elements misalign or completely disappear. The list items with the layout issues also isn't consistent. If I scroll up and see a few items that a broken I can scroll back a few seconds later and they will be fine but other items in the list will look distorted. Any idea what would cause this or what I could use to get around it? Below is a screen shot of what I mean.</p>
  
  <p><a href="https://i.stack.imgur.com/ROkOE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ROkOE.png" alt="Notice the timestamps, the 12:34 AM timestamp is aligned correctly. The others are either justified incorrectly or missing, even though the data for it is available!"></a>  </p>
  
  <p><strong>EDIT</strong>
  I restructured the xml in the list view based on the accepted answers recommendations and the problem is now fixed. Below is the updated xml in case anyone runs into a similar problem. </p>
  
  <pre><code>&lt;ListView  row="2" items="{{ measurements }}" id="measurement-list" loaded="" itemTap=""&gt;
      &lt;ListView.itemTemplate&gt;
          &lt;StackLayout&gt;
              &lt;Label class="date-seperator" text="{{header | dateShortDate}}" textWrap="true" visibility="{{ header ? 'visible' : 'collapsed' }}"/&gt;
              &lt;GridLayout columns="8,80,*,90" rows="*, *" class="{{'measurement-item trend-' + MeasurementColor}}"&gt;
                  &lt;Label rowSpan="2" col="0" class="{{'severity-' + MeasurementColor}}" text="" /&gt;                        
                      &lt;Label row="0" col="1" horizontalAlignment="right" class="measurement-value" text="{{Value}}" /&gt;
                      &lt;Label row="0" col="2" horizontalAlignment="left" class="{{'trend-arrow sm-arrow-' + TrendArrow }}" /&gt;                                                                                                          --&gt;
                  &lt;Label row="1" col="1" horizontalAlignment="right" class="measurement-uom" text="{{ UOM | getUOMFromGlucoseType }}"/&gt;
                  &lt;Label row="0" rowSpan="2" col="3" horizontalAlignment="left" verticalAlignment="middle" class="measurement-time" text="{{Timestamp | dateTimeStamp}}"/&gt;                        
              &lt;/GridLayout&gt;
          &lt;/StackLayout&gt;
      &lt;/ListView.itemTemplate&gt;
  &lt;/ListView&gt;
  </code></pre>