Nativescript: ListView height on iOS

[d3mac123]

Hello, for some reason my ListView renders perfectly on Android but not on iOS (see below):

I am running NS 3.0.1 and below is the XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:sd="nativescript-telerik-ui/sidedrawer" class="page" actionBarHidden="true" xmlns:map="nativescript-mapbox" loaded="pageLoaded">
 <sd:RadSideDrawer id="sideDrawer" drawerLocation="left">
        <!-- side drawer content -->
        <sd:RadSideDrawer.drawerContent>
            <StackLayout class="sidedrawer-left">

                <StackLayout class="sidedrawer-content">
                    <ListView id="pilotList" items="{{ activeList }}">
                        <ListView.itemTemplate>
                            <GridLayout columns="*,*2,*">
                                <Image src="{{ listPhoto }}" col="0" class="listPhoto" />
                                <Image src="{{ listIcon }}" col="0" class="listIcon" />
                                <Label text="{{ listNick }}" col="1"  class="listNick" />
                                <Label text="{{ listDistance }}" col="2" class="listDistance" />
                                <Label text="{{ listAltitude }}" col="1"  class="listAltitude" />
                                <Label text="{{ listHeading }}" col="1"  class="listHeading" />
                                <Label text="{{ listSpeed }}" col="2"  class="listSpeed" />
                            </GridLayout>
                        </ListView.itemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </sd:RadSideDrawer.drawerContent>


        <!-- The main content -->
        <sd:RadSideDrawer.mainContent>

                <!-- <GridLayout columns="*" rows="60,*,50,32" style.backgroundColor="#182126">  -->
                <GridLayout columns="*" rows="60,*,60" style.backgroundColor="#182126">   

                        <ContentView row="0">   
                            <GridLayout columns="*,*,*3" rows="*">        
                                <Image src="res://ic_duration" row="0" col="0" class="durIcon"></Image>
                                <Label text="{{ myDuration }}" row="0" col="0"  id="myDurationHolder" class="durText"/>

                                <Image src="res://ic_distance" row="0" col="1"   class="distIcon"></Image>
                                <Label text="{{ myDistance }}" row="0" col="1"  id="myDistanceHolder"   class="distText" /> 

                                <Image src="res://ic_altitude" row="0" col="2"   class="altIcon"></Image>
                                <Label text="{{ myAltitude }}" row="0" col="2" id="myAltitudeHolder"    class="altText"/> 
                            </GridLayout>
                        </ContentView>


                        <ContentView row="1" class="map"> <!--> height="240" width="480"> -->
                        <map:MapboxView
                            latitude="25.501373"
                            longitude="-80.548207"
                            zoomLevel="13"
                            mapStyle="streets"
                            hideAttribution="true"
                            showUserLocation="true"
                            hideCompass="true"
                            accessToken="pk.eyJ1IjoiZDNtYWMxMjMiLCJhIjoiY2oyZzRjazFwMDd2MzMyczZtMzg1Njl5eSJ9.w2K2EUOZzxtCqqAARGBbZA"
                            mapReady="onMapReady"  >
                        </map:MapboxView>
                        </ContentView>

                        <Image src="res://compass" row="1" col="0"  id="compass" class="compass"></Image>
                        <Image src="res://compasshead" row="1" col="0"  class="compassHead"></Image>
                        <Label text="{{ mySpeed }}" row="1" col="0" id="mySpeedHolder"  class="speedText"/>
                        <Label text="MPH" row="1" class="mph"/>  


                    <ContentView row="2" tap="toggleDrawer">
                            <GridLayout columns="*,*2,*,2*" rows="*">  
                                <Label text="Origin" row="2" col="0"  class="originText"/>
                                <Label text="{{ originHeading }}" row="2" col="0" id="originHeadingHolder" class="originHead"/>
                                <Label text="{{ originTime }}" row="2" col="1" id="originTimeHolder" class="originDur" /> 
                                <Label text="{{ originDistance }}" row="2" col="1" id="originDistanceHolder"  class="originDist"/> 
                                <Button text="{{ butAction }}" row="2" col="3" id="butActionHolder" tap="onStart"/>
                            </GridLayout>
                        </ContentView>
            <!---
                        <ContentView row="3">
                            <GridLayout columns="*,*4" rows="*"  class="bottomBar"> 
                                <Image src="res://ic_settings_off" row="0" col="0" tap="onSettings"></Image> 
                                <Image src="res://ic_dashboard" row="0" col="2"></Image>
                            </GridLayout>
                        </ContentView>
            -->
                </GridLayout>

            </sd:RadSideDrawer.mainContent>
    </sd:RadSideDrawer>
</Page>

Any ideas what I should do to fix it?
Thanks!

[NickIliev]

@d3mac123 in iOS the ListView should have a predefined size or otherwise it will either not occupy any space or lead to some side effects depending on its parent layouts. In your case, the parent layout (for the drawer content) is StackLayout (which does not have a predefined size.

To overcome this you can change it to GridLayout with rows="*" or use DP size. (or assign height your StackLayour or ListView)

[d3mac123]

Thank you!!!

[ButterMeWaffle]

interesting. I have tried the solution of setting the listviews height to a fixed value. After giving it a reasonable height and it not working. i tried heights like 800 and 1200000, the listview still displays with about 50 height

[delanick]

My problem is that even if I make the height larger than the list items take up, it still rnders the list with empty list items, covering the background page image, which looks terrible if there is no content in the list items. Someone have a solution for this?

[rynop]

This should really be documented someplace in the official docs - maybe here? I think everyone that uses RadListView will run into this. I'm converting from <ListView> which does not have this issue

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