Ввод Naitvescript-vue и сбой кнопки css при использовании переключателя приложений - PullRequest
Новая
       8

Ввод Naitvescript-vue и сбой кнопки css при использовании переключателя приложений

0 голосов
/ 21 ноября 2018

У меня есть приложение чата, ввод текста и кнопка ">". Они хорошо отображаются при использовании клавиатуры.

enter image description here

Но когда яиспользуйте приложение swichter (это квадратная кнопка, которая используется для переключения на другое приложение) ввода текста и сбой кнопки

enter image description here

Ввод текстаи кнопка вылетает, она тоньше и не учитывает начальную высоту

enter image description here

это мой код:

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>

и это 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%;

        }
    }
}

Мне нужна помощь и все попробовать, заранее большое спасибо

1 Ответ

0 голосов
/ 21 ноября 2018

Сам ListView можно прокручивать, поэтому вам не нужен ScrollView.Я вижу довольно нежелательные или ненужные макеты в вашем шаблоне.Поэтому я бы посоветовал вам посмотреть хороший пример пользовательского интерфейса чата от Shiva, который может подойти вам.

...