Android ListView height adjusted using ScrollView

android

#1

How can I style listview height to Android platform?
By default I need to swiping thought the items.

The properties height and min/maxHeight and Android platform don’t have effect.
Anyone can help me to investigate that?

If I remove the ScrollView from the parent code above, the height property styled with 100% works fine.

The height default works fine as well.

Here the code related with it:

<ScrollView
  orientation="vertical">

  <StackLayout
    orientation="vertical">

    <StackLayout
      orientation="vertical">
		
		<StackLayout>...</StackLayout>
		
		<pending-list></pending-list>
	</StackLayout>
  </StackLayout>
</StackLayout>

The pending-list is the direction related about the code below:

<StackLayout
  orientation="vertical"
>

  <StackLayout
    class="p-t-10 p-b-10"
  >
    <ListView
      [items]="additionsPendingList"
      (loaded)="onLoaded(event)"
      (itemLoading)="onItemLoading(event)"
      (itemTap)="onItemTap(event)"
      android:height="85"
      android:maxHeight="300"
      backgroundColor="yellow"
      class="list-group">

      <!-- item additions pending -->
      <ng-template let-item="item" let-odd="odd" let-even="even">
        <StackLayout
          orientation="horizontal"
          class="p-10"
        >
          <Label
            id="item_count"
            width="30"
            class="text-center"
            [text]="item.count">
          </Label>

          <Label
            id="item_name"
            width="auto"
            class="text-left"
            [text]="item.name">
          </Label>

          <Label
            id="item_price"
            width="auto"
            class="p-l-10 text-right"
            [text]="item.price">
          </Label>

          <Label
            id="button_discard"
            width="30"
            class="text-right"
            text="x">
          </Label>
        </StackLayout>
      </ng-template>
      <!-- end item additions pending -->

    </ListView>
  </StackLayout>

  <StackLayout
    orientation="horizontal"
    class="m-t-5 m-b-8 text-right">

    <Button
      id="button_cancel"
      text="{{ 'button_cancel' | L }}">
    </Button>

    <Button
      id="button_confirm"
      text="{{ 'button_confirm' | L }}">
    </Button>

  </StackLayout>

</StackLayout>

Related


#2

We don’t have anything called maxHeight, we do have only minHeight support. You have to explicitly set a fixed height which should be enough for displaying all the items in order to use ListView inside scroll view.


#3

I’m trying to do that dynamically in TS component using :

  public dynamicHeight = 1;
  public additionsPendingList: any[] = [
    {
      id: 1,
      count: 2,
      name: 'Ensalada Surimi',
      price: 180
    },
    {
      id: 2,
      count: 1,
      name: 'Tortilla de Papas',
      price: 70
    }
  ];

  incrementHeight() {
    this.dynamicHeight = this.additionsPendingList.length * 50;
  }

  public onListLoaded(e) {
    console.log('=== onListLoaded(e) called: ', e);

    this.incrementHeight();
  }

The addItem() event click in button is to test the increase method:

  public addItem() {
    let newItem01 = {
      id: 3,
      count: 3,
      name: 'name test 01',
      price: 100
    };

    let newItem02 = {
      id: 4,
      count: 3,
      name: 'name test 02',
      price: 100
    };

    this.additionsPendingList.push(newItem01);
    this.additionsPendingList.push(newItem02);

    console.log('___ new additions pending list: ', this.additionsPendingList);

    this.incrementHeight();
  }

But the empty space at the end of the height keeps increasing.

<ListView
      [items]="additionsPendingList"
      (loaded)="onListLoaded($event)"
      (itemLoading)="onItemLoading(event)"
      (itemTap)="onItemTap(event)"
      height="{{ dynamicHeight }}"
      backgroundColor="yellow"
      class="list-group">...</ListView>

Please let me know if I can do that better.