CODEWITHSUNDEEP
listviewnativescript
hekigan
hekigan

Reputation: 144

NativeScript ListView height and scrolling

another NativeScript question. :)

Soooo, here is the setting:

{
    "nativescript": {
        "id": "org.nativescript.githubreader",
        "tns-ios": {
            "version": "1.7.0"
        },
        "tns-android": {
            "version": "1.7.1"
        }
    },
    "dependencies": {
        "lodash": "^4.10.0",
        "nativescript-telerik-ui": "^1.0.1",
        "tns-core-modules": "1.7.1"
    },
    "devDependencies": {
        "nativescript-dev-typescript": "^0.3.0",
        "typescript": "^1.8.9"
    }
}

The problem is that when I get my list of data, the ListView stays the same height and just pops a scrollbar to -obviously- scroll.

The result that I am looking for is, as html does, have the ListView adapt in height depending on the data. Hence the main view would scroll, not the ListView component itself.

If I want to get a scrollbar, I would just limit the height of the ListView in CSS or otherwise.

I hope that what I say makes enough sense. :) And I search also in the source of Telerik UI of ListView but did not find anything of use so far :(

Thank you for taking the time to read.

Upvotes: 0

Views: 4641

Answers (1)

Bradley Gore
Bradley Gore

Reputation: 358

If you don't need all the functionality of a ListView, you may want to look into using ScrollView and inside somewhere have a Repeater. Something like this:

<scroll-view>
    <!-- content above your list of items, i.e. image, label, stack-layout, etc... -->
    <repeater items="navItems">
        <repeater.itemTemplate>
            <label text="{{navItemLabel}}" tap="navItemTapped" />
        </repeater.itemTemplate>
    </repeater>
</scroll-view>

If needed, you may end up wrapping entire thing in a <grid-layout columns="*" rows="*"> (1 row and 1 column, both set to * to take up full width/height of the available area), that way if the content grows beyond that size, the entire thing will scroll.

Upvotes: 3

Related Questions