Nativescript: Docklayout hides view with dock="bottom"

[robophil]

Hi,

I have two view in my docklayout, a StackLayout(dock="top") with a scrollview as its child and a button(dock="bottom"). When the contents of the scrollview becomes longer, my button gets hidden from view and is not accessible.

  <Page>
   <DockLayout stretchLastChild="false">
        <StackLayout  dock="top">
            <ListView items="{{ items }}" itemTap="listViewItemTap" cssClass="root item-list">
                <ListView.itemTemplate>
                    <widgets:details-item/>
                </ListView.itemTemplate>
            </ListView>
        </StackLayout>
        <Button text="Start dispatch" tap="startDispatch" dock="bottom" />
    </DockLayout>
    </Page>

[tsonevn]

Hi @Robophil

Thank you for contacting us.
I reviewed you code, However This is normal behavior when you are using ListView inside the DockLayout. The height of the ListView depends on the displayed item in the component. To solve your problem you could set specific height for the StackLayout or to use GridLayout. YOu could review the below attached example.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<GridLayout rows="300 50" columns="*">
        <StackLayout   row="0" col="0">
            <ListView items="{{ items }}" itemTap="listViewItemTap" cssClass="root item-list" >
                <ListView.itemTemplate>
                    <Label text="{{title}}" textWrap="true" />

                </ListView.itemTemplate>
            </ListView>
        </StackLayout>
        <Button text="Start dispatch" tap="startDispatch" row="1" col="0" />
 </GridLayout>
</Page>

main-page.ts

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { HelloWorldModel } from "./main-view-model";
import {Observable} from "data/observable";
import {ObservableArray} from "data/observable-array"

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    // Get the event sender
    var page = <Page>args.object;


     var array = new ObservableArray();
     for(var i = 0; i<100; i++){
         array.push({title:"Title "+i});


     }
    page.bindingContext = {items:array};
}

I hope this will help

[robophil]

I was able to achieve this by using a grid view. Thanks @tsonevn

[bearoutthere]

@tsonevn Hi Nikolay,
Just ran into the same problem as the op. Could you elaborate why this behavior is normal. I thought the whole point of docked views was to stay docked at their respective edges and the last child stretching to take up the remaining space. If the list view is stretching into the remaining space shouldn't the docked views' position remain unaffected?

[tsonevn]

Hi @bearoutthere,
Indeed this is the of the DockLayout.
However, in case, the first child is ListView or ScrollView, their content can become larger. Regarding that, the component will need more space on the screen and will displace the others.
Because of that, you should specify the height of the ListView or ScrollView. Another option is to use GridLayout with specified rows height. For example:

 <DockLayout stretchLastChild="false">

        <GridLayout dock="top" rows="300 50" columns="*">
                <ListView items="{{ items }}" itemTap="listViewItemTap" row="0" col="0" cssClass="root item-list" >
                        <ListView.itemTemplate>
                            <Label text="{{title}}" textWrap="true" />

                        </ListView.itemTemplate>
                </ListView>
                <Button text="Start dispatch" tap="startDispatch" row="1" col="0" />
        </GridLayout>
        <StackLayout dock="bottom">
            <Label text="Bottom" textWrap="true" />
        </StackLayout>
    </DockLayout>

[bearoutthere]

thanks @tsonevn

adding the height kind of defeats the point "stretchlastchild" property, which should take care of the proper sizing to make sure that the component docked to the bottom always stays there.
will it work if a list view is wrapped in a grid view that acts as the last child of the dockview?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.