ScrollView on Android not rendering after resize

Question

Create simple chat

<Page
 actionBarHidden="true"
> 
 <GridLayout columns="*" rows="1*,8*,1*">
  <StackLayout row="0" class="form"  background="#FAE379" >
   <Label class="lbl-menu" fontSize="20" marginBottom="1%" @tap="$navigateBack">
    <FormattedString>
     <Span fontSize="15">{{'fa-chevron-left' | fonticon}}</Span>
     <Span fontSize="20" class="txt-btn">     Test</Span>
    </FormattedString>
   </Label>
  </StackLayout>

  <ScrollView  row ="1" id="myScroller">
   <StackLayout >
    <StackLayout v-for="(m,i) in messages" :key="i" marginTop="30">
     <StackLayout class="card-chat-msg-o" v-if="m.u">
      <StackLayout>
       <Label class="card-chat-text-o"  textWrap="true" :text="m.txt"/>
      </StackLayout>
     </StackLayout>
     <StackLayout class="card-chat-msg-u" v-else>
      <StackLayout>
       <Label class="card-chat-text-u"  textWrap="true" :text="m.txt"/>
      </StackLayout>
     </StackLayout>
    </StackLayout>
   </StackLayout >
  </ScrollView  >

  <GridLayout row ="2" columns="1*,8*,1*" rows="*" borderColor="#F1F1F1" borderWidth="2%">
   <Label col="0" class="fa" fontSize="30">{{'fa-paperclip' | fonticon}}</Label>
   <TextView col="1" editable="true" v-model="message" hint="Enter message" autocorrect="true"/>
   <Label col="2" class="fa" fontSize="30" @tap="sendMessage()">{{'fa-play' | fonticon}}</Label>
  </GridLayout>

 </GridLayout>
</Page>

when I focus TextView , android show keyboard, ScrollView partially overlaped and bottom items of messages not showing

after that I push new items in messages

ScrollView rennder only new messages in correct positions other items of messages not showing

https://yadi.sk/i/R7F7sELLYZAREw

ListView also has a similar problem

https://play.nativescript.org/?template=play-vue&id=5jP4yP

Are you using Vue? Can you build a Playground example of same? — Manoj
– Manoj, Commented Oct 29, 2018 at 22:58
Yes, I use Vue. play.nativescript.org/?template=play-vue&id=5jP4yP — Alexandr Lukovnikov
– Alexandr Lukovnikov, Commented Oct 30, 2018 at 8:55

Manoj · Accepted Answer · 2018-10-30 13:45:42Z

1

Looks like you have problem with your layouts, seems to me that you got too many nested layouts. I have built a similar example here that should give you what you are looking for with relatively few UI elements on screen.

Apart from nested layout, I would suggest you to

Avoid percentage based measurements as much as possible. By default all measurements will be in density independent pixels which should work for most use cases.
ActionBar is usually a fixed element, it will not increase it's size based on screen height. So even if you are placing a custom view, you don't have to keep dynamic height.

Learn more about layouts here.

answered Oct 30, 2018 at 13:45

Manoj

21.9k3 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexandr Lukovnikov Over a year ago

That was the problem. Thank!

Collectives™ on Stack Overflow

ScrollView on Android not rendering after resize

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related