Nsryjdtyk

I have a chat app, the input text and the button ">" They are showing well when using the keyboard

But when I use the app swichter (
It is the square button, which is used to switch to another app )the input text and the button crash

Input text and button crash, It is thinner and does not respect the initial height

this is my code:

chat.vue:

<StackLayout class="primero">

       <ScrollView height="90%" id="scrollViewOf" ref="scrollViewOf">

                    <ListView  id="listviewtest" separatorColor="transparent" margin-bottom="50" padding="5"  for="item in  allMessages">

                        <v-template>

                            <!-- Shows the list item label in the default color and style. -->                                

                                <GridLayout   :class="item.data.sender"  columns="*" rows="auto">    

                                    <StackLayout>

                                            <Label  class="timestamp" v-if="item.data.sender == 'admin'" text="Tú:" row="0" col="0"  textWrap="true"/>   

                                            <Label  class="timestamp" v-else-if="item.data.sender == 'user'" text="Cliente:" row="0" col="0"  textWrap="true"/>                                            

                                            <Label  class="message" :text="item.data.text"  row="0" col="0"  textWrap="true"/>    

                                            <Label  class="timestamp" :text="item.data.dateFormated"  row="0" col="0"  textWrap="true"/>                                                          

                                    </StackLayout>      



                                </GridLayout> 



                        </v-template>                   

                    </ListView>

        </ScrollView>          

        <StackLayout id="boxButtonAndInput" height="10%">

            <GridLayout columns="*, auto" >

                <TextField  v-model="send_msg_text" row="0" col="0" returnKeyType="Enviar" textWrap="true" autocorrect="true" :hint="hint"  />

                <Button   row="0" col="1" :text="text_button" @tap="SendMsg" />

            </GridLayout>

        </StackLayout>

    </StackLayout>

and this the css:

#boxButtonAndInput {

    padding: 5;

    margin-bottom: 20;        

    GridLayout {    

        height: 100%;        

        TextField {

            border-color: #3399cc;

            border-top-style: groove;

            border-width: 2px;

            font-family: 'Roboto', sans-serif !important;

            font-size: 20px !important;   

            border-color: #3399cc; 

            border-top-left-radius: 10;

            border-top-right-radius: 10;

            border-bottom-left-radius: 10;

            border-bottom-right-radius: 10;

            background-color: #ffffff;

            height: 100%;

        }

        Button {                

            font-family: 'Roboto', sans-serif !important;

            font-size: 20px !important;

            background-color: #3399cc;

            color: #ffffff;

            border-top-left-radius: 10;

            border-top-right-radius: 10;

            border-bottom-left-radius: 10;

            border-bottom-right-radius: 10;

            margin-left: 5;

            height: 100%;



        }

    }

}

I need help and try everything, thank you very much in advance

The ListView itself is scrollable so you do not need a ScrollView there. I do see quite unwanted or unnecessary layouts in your template. So I would suggest you check out the nice chat UI example from Shiva which might work for you.