NativeScript ListView height and scrolling

Question

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"
    }
}

Drawer content > StackLayout > ListView component

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.

Maybe it is a good idea to upgrade to nativescript 2.0.0, it solved a lot of problems for me. github.com/NativeScript/nativescript-cli/blob/release/… — R Pelzer
– R Pelzer, Commented May 10, 2016 at 6:57

Bradley Gore · Accepted Answer · 2016-05-10 01:33:05Z

3

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.

answered May 10, 2016 at 1:33

Bradley Gore

3482 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hekigan Over a year ago

That sounds like a good idea to me, thanks. So there is no way to do that for the moment with the ListView? Oh, and an additional question pertaining to the ScrollView: Should it be placed inside the RadSideDrawer or just after the opening of Page tag?

Bradley Gore Over a year ago

@hekigan You'd put the ScrollView inside the RadSideDrawer - it would wrap the entire content that you would want to scroll. i.e. if you have an element acting as a header you may not want it to scroll, but everything beneath it. ListView automatically scrolls if the items inside it are too large, that's part of its feature-set.

hekigan Over a year ago

Thank you for your time. In the end I went with something that I will need to clean later on. What I did is kind of dirty: <ListView items="{{ searchResult }}" height="{{ searchResult.length * 143 }}"> That will do for now, but not something that I want to leave as is :)

Collectives™ on Stack Overflow

NativeScript ListView height and scrolling

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related