ListView without Height Value


#1

My html code is the following:

<FlexboxLayout flexDirection="column">
  <ActionBar fontSize="30" title="Account Transactions" backgroundColor="transparent" color="white">
    <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" (tap)="onNavBtnTap()" [nsRouterLink]="['/main']" pageTransition="slideRight"></NavigationButton>
    <ActionItem (tap)="onEdit()" icon="res://ic_today_white_24dp" ios.position="right" visibility="{{ isEditing ? 'collapse' : 'visible' }}"
      [nsRouterLink]="['/main']" pageTransition="fade"></ActionItem>
  </ActionBar>
  <StackLayout flexGrow="1">
    <ListView flexGrow="1" [items]="everything" (loadMoreItems)="loadMoreItems()">
      <div *ngFor="let item of everything" ; let i="index" class="div1">
        <StackLayout (tap)="details(item.id,item.idDocumento)" marginTop="20" marginLeft="20" marginRight="20" marginBottom="10"
          backgroundColor="white" [nsRouterLink]="['/main']" pageTransition="slide" borderRadius="5%">
          <GridLayout rows="auto auto auto" columns="* 75">
            <Label class="labelTransactionType" text={{item.idDocumento}} textWrap="true" row="0" col="0" marginTop="10"></Label>
            <Label class="labelTransactionValue" text={{item.value}} textWrap="true" row="1" col="0"></Label>
            <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
            <Label class="labelTransactionData" text={{item.date}} textWrap="true" row="2" col="0" marginBottom="10"></Label>
          </GridLayout>
        </StackLayout>
      </div>
    </ListView>
  </StackLayout>
  <FlexboxLayout>
    <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
      [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
  </FlexboxLayout>
</FlexboxLayout>

But the most important line i want to talk about is the line of the declaration of the ListView Component.

    <ListView flexGrow="1" [items]="everything" (loadMoreItems)="loadMoreItems()">

If i don’t set a height to the ListView i get the following Screen:

As you can see it displays everything correctly except the bottombar. The bottombar gets cutted in half because the listView takes the wholeScreen and leaves none for the Bottombar.

But if i set a height for the ListView,

Like this:

    <ListView flexGrow="1" [items]="everything" (loadMoreItems)="loadMoreItems()" height="450">

The screen works but you can see that it only goes till 3/4 of the screen the ListView , but the bottombar gets displayed correctly.

.

This tactic is not effective at all because if i move to an android cellphone of a resolution of 2k the listview with the height of 450 gets literally at the middle of the screen

So am i supposed to tackle this problem?

What i want to achieve is a ListView component with no height defined but that spots when it hits the bottombar. So the bottombar can display whatever it wants.

Thanks in advance.


#2

So is this bottombar supposed to like be the final row of the Listview, or always anchored above your tabstrip?


#3

I managed to solve it.

Code Result:

<GridLayout rows="*, auto">
  <StackLayout row="0">
    <ActionBar fontSize="30" title="Account Transactions" backgroundColor="transparent" color="white">
      <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" (tap)="onNavBtnTap()" [nsRouterLink]="['/main']" pageTransition="slideRight"></NavigationButton>
      <ActionItem (tap)="onEdit()" icon="res://ic_today_white_24dp" ios.position="right" visibility="{{ isEditing ? 'collapse' : 'visible' }}"
        [nsRouterLink]="['/main']" pageTransition="fade"></ActionItem>
    </ActionBar>
    <ListView [items]="everything" (loadMoreItems)="loadMoreItems()" flexGrow="1">
      <ng-template let-item="item">
        <StackLayout (tap)="details(item.id,item.idDocumento)" marginTop="20" marginLeft="20" marginRight="20" marginBottom="10"
          backgroundColor="white" [nsRouterLink]="['/main']" pageTransition="slide" borderRadius="5%">
          <GridLayout rows="auto auto auto" columns="* 75">
            <Label class="labelTransactionType" text="{{item.idDocumento}}" textWrap="true" row="0" col="0" marginTop="10"></Label>
            <Label class="labelTransactionValue" text="{{item.value}}" textWrap="true" row="1" col="0"></Label>
            <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
            <Label class="labelTransactionData" text="{{item.date}}" textWrap="true" row="2" col="0" marginBottom="10"></Label>
          </GridLayout>
        </StackLayout>
      </ng-template>
      </ListView>
  </StackLayout>
  <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
    [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
</GridLayout>

#4

Yep the grid is the best, LV needs to know it’s height is the issue, almost always wrap it in a grid somewhere in the view


Android ListView height adjusted using ScrollView