GridLayout with full-height map and auto-height ListView: Android shrinks the ListView

Hi,

This is very interesting problem that I cannot easily explain, therefore I’m also providing screenshots.

I have a GridLayout with 2 rows. First row wraps a GoogleMaps view which is full-height (*). Second row wraps a ListView with auto-height (auto), which wraps a couple of buttons. The problem is that Android shows only the first button: http://3.1m.yt/yhAjkBp.png

Here is my layout:

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:maps="nativescript-google-maps-sdk" loaded="onload">
   <GridLayout rows="*, auto">
      <maps:mapView row="0" latitude="{{ latitude }}" longitude="{{ longitude }}" zoom="{{ zoom }}" bearing="{{ bearing }}" tilt="{{ tilt }}" padding="{{ padding }}" mapReady="onMapReady" markerSelect="onMarkerSelect" markerInfoWindowTapped="onMarkerInfoWindowTap" cameraChanged="onCameraChange" />
      <ListView items="{{ buttons }}" loaded="listViewLoaded" row="1">
         <ListView.itemTemplate>
            <GridLayout rows="auto">
               <Button id="{{id}}" text="{{name}}" mode="{{mode}}" class="{{ type }}" tap="onButtonTap" row="0"/>
            </GridLayout>
         </ListView.itemTemplate>
      </ListView>
   </GridLayout>
</Page>

TNS version 2.5.0 TNS Core Modules version 2.5.0

[tsonevn]

Hi @ickata In my further investigation, I found that this is something expected while setting auto-height (auto) to the ListView inside a GridLayout. This has been related to the fact that to the ListView we should set correct height, which allows us to setup the height for the items.

However, for your case, you could use Repeater component, which will allow you to create a custom template to bind to it array with the needed content. While using this component the height will be changed will be changed according to the items number. For Example:

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:maps="nativescript-google-maps-sdk"  navigatingTo="navigatingTo">
                  <GridLayout rows="* auto">
                  <GridLayout row="0" >
                      <maps:mapView latitude="{{ latitude }}" longitude="{{ longitude }}" 
                        zoom="{{ zoom }}" bearing="{{ bearing }}" 
                        tilt="{{ tilt }}" padding="{{ padding }}" mapReady="OnMapReady"  
                      markerSelect="onMarkerSelect" 
                      cameraChanged="onCameraChanged" />
                  </GridLayout>

                      <Repeater row="1" items="{{ source }}">
                          <Repeater.itemsLayout>
                              <StackLayout />
                          </Repeater.itemsLayout>
                          <Repeater.itemTemplate>
                              <Label text="{{title}}" textWrap="true" />
                          </Repeater.itemTemplate>
                      </Repeater>
                      
                  </GridLayout>
             
</Page>

TypeScript

import { EventData, Observable} from "data/observable";
import {ObservableArray} from "data/observable-array";
import { Page } from "ui/page";
var mapsModule = require("nativescript-google-maps-sdk");

// 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();
    var listviewarray=[{title:"title1"}, {title:"title2"}, {title:"title3"}, {title:"title4"}, {title:"title4"}, {title:"title4"}]
    
    array.push({
        title: '1',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        image: 'http://lorempixel.com/200/100/'
    });
    array.push({
        title: '1',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        image: 'http://lorempixel.com/200/100/'
    });
    array.push({
        title: '1',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        image: 'http://lorempixel.com/200/100/'
    });
    
    var observable = new Observable({source: array});
    observable.set("latitude", -33.86);
        observable.set("longitude", 151.20);
        observable.set("zoom", 8);
        observable.set("bearing", 0);
        observable.set("tilt", 0);
        observable.set("padding", [40, 40, 40, 40]);


    observable.set("source", listviewarray);
    page.bindingContext = observable;
}

export function OnMapReady(args) {
  var mapView = args.object;
 
  console.log("Setting a marker...");
  var marker = new mapsModule.Marker();
  marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
  marker.title = "Sydney";
  marker.snippet = "Australia";
  marker.userData = { index : 1};
  mapView.addMarker(marker);
}
 
export function onMarkerSelect(args) {
   console.log("Clicked on " +args.marker.title);
}
 
export function onCameraChanged(args) {
    console.log("Camera changed: " + JSON.stringify(args.camera)); 
}

Hope this helps

[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.