Floating Textfield + button bottom of the view

[raosrinivas1983]

Hi,

I'm working on a chat application in nativescript, i'm unable to display textfield + button bottom of the view. Have tried different layout mechanisms but no luck. If you have any idea how can i display below to the listview. Below is my existing code, its working perfectly in android emulator but text field and button is not visible in actual phone. Thanks in advance.

<GridLayout>
    <GridLayout rows="auto, *, auto, auto" class="nsChatView-view">
        <ListView 
            #messageList
            row="1"
            class="nsChatView-messageList">
            <template let-item="item">
            <GridLayout rows="auto" columns="auto,*,auto"
                [class]="item.isRight ? 'nsChatView-item-right' : 'nsChatView-item-left'">
                    <Image row="0" col="item.isRight ? '2' : '0'"         
                        class="nsChatView-avatar" 
                        verticalAlignment="top"   
                        [src]="item.image"    
                        [visibility]="item.image ? 'visible' : 'collapsed'" ></Image>
                        <StackLayout row="0" col="1" class="nsChatView-message">
                                <Border class="nsChatView-messageArea">
                                    <StackLayout class="nsChatView-content" verticalAlignment="middle" 
                                        [horizontalAlignment]="item.isRight ? 'right' : 'left'">
                                        <Label class="nsChatView-date" [horizontalAlignment]="item.isRight ? 'right' : 'left'" 
                                            [text]="item.date" 
                                            [visibility]="item.date ? 'visible' : 'collapsed'" ></Label>
                                        <Label class="nsChatView-messageText" 
                                            [horizontalAlignment]="item.isRight ? 'right' : 'left'"
                                            [text]="item.message" textWrap="true"></Label>
                                    </StackLayout>
                                </Border>
                        </StackLayout>
                        <Border row="0" [col]="item.isRight ? '0' : '2'" class="nsChatView-separator" ></Border>
                </GridLayout>   
            </template>
        </ListView>
        <AbsoluteLayout row="1" class="nsChatView-sendMessageArea">
            <GridLayout width="99%" height="40" row="1" class="nsChatView-sendMessageArea" columns="*, auto" verticalAlignment="top">
                    <TextField row="0" col="0" #msgTextField  class="nsChatView-messageField" (returnPress)="onSendTap()" [hint]="typeMessageHint"></TextField>
                    <Button row="0" col="1" class="nsChatView-sendMessageButton" (tap)="onSendTap()" text="Send"></Button>
            </GridLayout>
        </AbsoluteLayout>  
    </GridLayout>
     
</GridLayout>

[bradmartin]

Do you have some mock up of the screen I can see? I have a general sense of what you want, but seeing it makes it much easier 👍

[raosrinivas1983]

Hi Martin,

Thanks for the quick reply. Attached the screens shots for both horizontal and vertical orientation. You can observe in vertical orientation text field and buttons are not visible and rendered outside the visible view.

[raosrinivas1983]

HI

Forgot to mention, the same code works in the older Android(4.4.2) and not the latest android

[bradmartin]

Without knowing more of the code for the project, mainly styles, could you try setting height="100%" on the main parent GridLayout and see what happens.

[raosrinivas1983]

Below is the parent control layout. Have tried 100% but no use then i gave 80%, its displayed as below,

conversations-common.txt - styles
conversations.html.txt - parent element layout

conversations-common.txt

conversations.html.txt

[bradmartin]

Seems strange, I don't have much time to test and debug this specific layout question. Have you joined the slack channel for NS? If not, that's a great place to get help with layout type questions. Many helpful and knowledgeable devs to help you out. You can sign up on the nativescript.org website