Doesn't work correctly if text-view is at the bottom of page

[erkanarslan]

I have a page that users can send messages. Message box (text-view inside a stack-layout) is at the bottom of page. Message list gets the remainin space above:

If I tap text-view, it is not shown in the first attempt:

If I close the keyboard and tap text-view again page design is broken. I put red border around the message-box. You can see that there is a white space below that contains no elements and height of that space is almost same as the keyboard. Message-box is the bottom-most element. So there shouldn't be any space below it.

[closca]

Same issue here

[gogoout]

+1
Actually, I found a solution. The key thing is to make sure your TextView inside a ScrollView.

My structure is like:

before

<GridLayout height="100%" rows="*,auto">
  <ScrollView row="0" height="100%">
    ...messages list here
  </ScrollView>
  <GridLayout class="typing-bar">
   <TextField col = "0" class = "input input-bottom-border" hint = "Write a message"></TextField>
  </GridLayout>
</GridLayout>

after

<GridLayout height = "100%">
  <ScrollView height = "100%">

<GridLayout height="100%" rows="*,auto">
  <ScrollView row="0" height="100%">
    ...messages list here
  </ScrollView>
  <GridLayout class="typing-bar">
   <TextField col = "0" class = "input input-bottom-border" hint = "Write a message"></TextField>
  </GridLayout>
</GridLayout>

  </ScrollView>
</GridLayout>

It's a bit verbose but it works.

[tahir-jamil]

not working for me sir

[dcandamil]

@gogoout This is the solution!
Thanks

[kennethkeim]

It's important to set the height explicitly on the outermost Layout all the way down to the inner ScrollView, otherwise, you'll have the first ScrollView stretch to accommodate the messages and your chat box may be out of view below the bottom of the screen.
Thanks for the solution @gogoout !

[hhanckes]

Hi guys, I am having the same issue in iOS (android works like a charm), tried different approaches changing layout but nothing seems to do the trick. Any help is greatly appreciated!

This is what is happening:

The template is the following (using nativescript-vue):

<template>
  <Page class="page">
      <GridLayout rows="auto, *, auto" class="m-y-10 m-x-10" height="100%">
        <GridLayout row="0" columns="*, auto">
          <Label col="0" class="h3 heading" textWrap="true" :text="'XXXX" fontWeight="bold"></Label>
          <Label col="1" class="p-t-5" text="Close" @tap="onCancelTap" />
        </GridLayout>
        <ListView row="1" for="msg in messages" ref="listView" @itemLoading="onItemLoading">
          <v-template>
            <GridLayout columns="*" rows="auto, auto" class="msg p-10">
              .....
            </GridLayout>
          </v-template>
        </ListView>
        <StackLayout row="2">
            <GridLayout columns="*, auto" class="m-10 form">
                <TextField class="text-input p-x-5" col="0" v-model="message" />
                <Button class="btn-primary p-10 m-x-10" col="1" text="Enviar" @tap="chat(message)"></Button>
            </GridLayout>
        </StackLayout>
      </GridLayout>
  </Page>
</template>

[hhanckes]

It only happens for me when the form is displayed inside a Modal.

[mennolp098]

This also happens to me the scrollview solution seems to work a little bit on my problem. The textfield now stays on the same Y-axis but when new data is being added in my listview it will put the textfield back to it's original position and after that it will immediately shift back to the position adjusted by the keyboard.

[SergioZhydecky]

I have the same. When new data is being added in my listview it will put the textfield back to it's original position. What to do? Help someone

[daweedm]

I have the same. When new data is being added in my listview it will put the textfield back to it's original position. What to do? Help someone

same problem here, did you managed to solve this ?