Nativescript: Padding-bottom to ListView last item

Created on 13 Jul 2016 · 8Comments · Source: NativeScript/NativeScript

I'm currently building an App with NS 2.1 plus Angular, I'm using the nativescript-swiss-army-knife plugin to set the Android NavBar to translucent. When the NavBar is translucent the page extends to the very bottom of the screen, beneath the NavBar as expected. With most other layouts you can add padding-bottom to account for this, I have been unable to find a way to add padding to the bottom of ListView so the content will scroll fully above the Navbar.

Did you verify this is a real problem by searching [Stack Overflow]

Yes I did, either it's not their or I'm terrible searching SO.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

Tns info is all up to date

Please tell us how to recreate the issue in as much detail as possible.

Simply add the nativescript-swiss-army-knife plugin and set the NavBar to translucent. Then attempt to add padding-bottom/margin-bottom to a ListView, it doesn't work.

Thank you for looking into this issue, and for the awesome framework!!

android question

Source

SP1966

All 8 comments

Hello @SP1966

Have you tried to wrap your list view in a container element and to set the padding accordingly?
Can you please share the code of your scenario in order to reproduce it here and to give the most proper solution.

NickIliev on 13 Jul 2016

Here is what the ListView looks like with no padding/margin added to the bottom of the StackLayout, shown is the final item in the list, that is as far as you can scroll upwards, leaving that final item partially behind the NavBar.

untitled

Here is what the ListView looks like with 50 added to the StackLayout's padding-bottom. This is not the final item thus you can see that we lose the value in having the NavBar translucent if all that happens is the space remains empty, but the NavBar is translucent.

untitled2

I don't believe any code should be needed. When the NavBar is set to translucent Android sets the bottom of the page to be the very bottom of the screen, behind the NavBar. As currently setup Nativescript does not allow for adding a padding-bottom to a ListView which means there is no way to ensure that the final item in a list will scroll not just to the bottom of the page, but above the top edge of the NavBar fully in view to the user.

Thanks for looking into this!

SP1966 on 14 Jul 2016

Hey @SP1966

I have tested this with our tutorial app Groceries (you can clone and test the angular-end branch) where a list-view is implemented.
I have no problems setting padding-bottom to the list-view so that is why I have requested your sample project to investigate your scenario. If you want to test with Groceries modify _pages/list/groceries-list.css_ like this

ListView {
  padding-left: 50;
  padding-bottom: 120;
}

NickIliev on 14 Jul 2016

👍1

@NickIliev

I cloned the Groceries app and added the same css as in your post above and get the following:

untitled

The problem here is the padding is being added to bottom of the Page pushing empty whitespace onto the bottom rather than to the last item in the ListView which would allow the ListView to fill the Page but when the final item scrolls into view it, and only it would have the additional padding. Looking at the first image I posted in the earlier post I want that final card to carry the padding-bottom so that it will scroll up fully into view above the NavBar.

In the image above (this post) imagine if the NavBar were translucent, the final item in the list would be visible behind the NavBar, but the user would be unable to interact with it. If we could add padding to the final item with the ListView that would allow the final item to scroll above the translucent NavBar and allow it to be interacted with.

Maybe that isn't possible and I will abandon the translucent NavBar, my thinking was that it makes the app feel less claustrophobic even if it really isn't.

Edit: Looking at the title for this issue I clearly blew it! To be crystal clear I'm asking for the ability to add padding-bottom to ONLY the final item within the ListView. I apologize if that was causing you migraines! :)

SP1966 on 15 Jul 2016

Hey @SP1966

You can set your last list view item via your code-behind file.
Consider something like this scenario:

_list.css_

.ordinary-item {
  background-color: #FFFFFF;
}

.last-item {
  background-color: red;
  padding-bottom: 30;
}

now all you have to do is to apply the styles accordingly
_list.html_ (syntax for cssClass binding depends on whether you are using NativeScript Core or NativeScript + Angular-2)

  <ListView [items]="groceryList" row="1" >
    <template let-item="item">
      <GridLayout columns="*, auto" class="{{ isLast ? 'last-item' : 'ordinary-item' }}">
        <Label col="0"></Label>
        <StackLayout col="1">
          <Image src="res://icon"></Image>
        </StackLayout>
      </GridLayout>
    </template>
  </ListView>

Notice that now we have the following line class="isLast ? 'last-item' : 'ordinary-item'"
So the last step is to introduce the boolean variable isLast and trigger it to true when you are loading the last item. The code will differ depending on the logic you have for your view-model but basically, it is something like this

  this.items = [];
  for(var i = 0; i < 20; i++) {
    if (i !== 19) {
        this.items.push(new observable.Observable({
            id: i,
            name: "Item " + i,
            isLast: false
        }));
    } else {
            this.items.push(new observable.Observable({
            id: i,
            name: "Item " + i,
            isLast: true
        }));
    }
  }

NickIliev on 18 Jul 2016

👍1

This would be solved if you could set the FooterView for the ListView. I had an issue open regarding this.