How to use <ScrollView> in part of screen


#1

I’m trying to include a <ScrollView> component to scroll part of the screen but it’s not working.

Here is my source code:

<ActionBar title="">
  <NavigationButton android.systemIcon="ic_menu_back" android.iconVisibility="always" (tap)="backToPreviousScreen()"></NavigationButton>
  <Image src="res://topbar_logo" stretch="none"></Image>
</ActionBar>

<GridLayout>
  <GridLayout rows="auto, auto, *", columns="*">
    
    <StackLayout row="0" col="0" orientation="horizontal" class="pageTitle">
        <GridLayout rows="*" columns="auto, *" class="middleAlignment pageTitleHeight">
          <Label row="0" col="0" text="COMO CHEGAR" class="boldText"></Label>
          <StackLayout row="0" col="1" orientation="horizontal" horizontalAlignment="right">
            <Label text="Detalhes"></Label>
          </StackLayout>
        </GridLayout>
    </StackLayout>

    <GridLayout row="1" col="0">

        <StackLayout orientation="vertical" style="margin-left: 20; margin-right: 20;">
          <Label [text]="tripPlanFrom" class="labelSearchStyle boldText" style="margin-top: 10;" automationText="Origem"></Label>
          <Label [text]="tripPlanTo" class="labelSearchStyle boldText" automationText="Destino"></Label>
        </StackLayout>

    </GridLayout>

    <ScrollView row="2" col="0">
      
      <GridLayout rows="auto, *, *" columns="*" class="listViewContainer" automationText="Plano de viagem">
          
          <GridLayout row="0" col="0" rows="*" columns="auto, auto, auto, *" orientation="horizontal" class="listItemTitle">
            <Label row="0" col="0" [text]="tripPlan.departureTime" class="boldText" style="margin-left: 20; width: 40;"></Label>
            <Label row="0" col="1" text=" - " class="boldText"></Label>
            <Label row="0" col="2" [text]="tripPlan.arrivalTime" class="boldText" style="width: 40; text-align: right;"></Label>
            <Label row="0" col="3" [text]="tripPlan.travelTime" class="boldText" style="margin-right: 20; text-align: right;"></Label>
          </GridLayout>
          
          <StackLayout row="1" col="0" orientation="vertical">
              <GridLayout rows="auto" columns="*, auto">
                <StackLayout orientation="horizontal" row="0" col="0" style="margin-left: 20;">
                  <StackLayout *ngFor="let step of tripPlan.steps; let isLastItem = last" orientation="horizontal">
                    <Image src="res://tp_walk" stretch="none" [visibility]="step.action == 1 ? 'visible' : 'collapsed'"></Image>

                    <GridLayout rows="auto, auto" columns="auto" [visibility]="step.action == 2 ? 'visible' : 'collapsed'">
                      <Label row="0" col="0" [text]="step.route"></Label>
                      <Image row="1" col="0" src="res://tp_bus" stretch="none"></Image>
                    </GridLayout>

                    <Image src="res://tp_step_separator" stretch="none" [visibility]="isLastItem || step.action == 3 ? 'collapsed' : 'visible'"></Image>
                  </StackLayout>
                </StackLayout>

                <Image row="0" col="1" src="res://detail" stretch="none" class="middleAlignment" style="width: 10%"></Image>
              </GridLayout>
              
              <StackLayout *ngFor="let step of tripPlan.steps; let i = index" orientation="vertical" style="margin-top: 10; margin-left: 20; margin-right: 20;">
                <StackLayout orientation="horizontal" style="margin-bottom: 5;">
                  <Label [text]="(i + 1)"></Label>
                  <Label text=". "></Label>
                  <Label [text]="step.description" textWrap="true" style="line-height: 2;"></Label>
                </StackLayout>
              </StackLayout>
          </StackLayout>

          <MapView row="2" col="0" width="100%" height="100%" (mapReady)="onMapReady($event)"></MapView>

      </GridLayout>
  </ScrollView>

  </GridLayout>

  <GridLayout [visibility]="isLoading ? 'visible' : 'collapsed'">
    <StackLayout class="modalLoadingStyle"></StackLayout>
    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapsed'" 
                        horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
  </GridLayout>

</GridLayout>

Do you have any suggestion?

Thanks


#2

hi, I have this design in QuickNoms.

The top part of the screen has an image and segmented bar, and then you can scroll the recipe part. The bottom of the screen has a static ‘play’ text to speech button as well.


#3

I solved the problem setting the height of <ScrollView> to “understand” it’s children’s size elements

Here is my final code:

<ActionBar title="">
  <NavigationButton android.systemIcon="ic_menu_back" android.iconVisibility="always" (tap)="backToPreviousScreen()"></NavigationButton>
  <Image src="res://topbar_logo" stretch="none"></Image>
</ActionBar>

<GridLayout>
  <GridLayout rows="auto, auto, *", columns="*">
    
    <StackLayout row="0" col="0" orientation="horizontal" class="pageTitle">
        <GridLayout rows="*" columns="auto, *" class="middleAlignment pageTitleHeight">
          <Label row="0" col="0" text="COMO CHEGAR" class="boldText"></Label>
          <StackLayout row="0" col="1" orientation="horizontal" horizontalAlignment="right">
            <Label text="Detalhes"></Label>
          </StackLayout>
        </GridLayout>
    </StackLayout>

    <GridLayout row="1" col="0">

        <StackLayout orientation="vertical" style="margin-left: 20; margin-right: 20;">
          <Label [text]="tripPlanFrom" class="labelSearchStyle boldText" style="margin-top: 10;" automationText="Origem"></Label>
          <Label [text]="tripPlanTo" class="labelSearchStyle boldText" automationText="Destino"></Label>
        </StackLayout>

    </GridLayout>
    
    <ScrollView row="2" col="0" width="100%" height="100%">
    <StackLayout>

      <GridLayout rows="auto, auto, *" columns="*" class="listViewContainer" automationText="Plano de viagem">
        
          <GridLayout row="0" col="0" rows="*" columns="auto, auto, auto, *" orientation="horizontal" class="listItemTitle">
            <Label row="0" col="0" [text]="tripPlan.departureTime" class="boldText" style="margin-left: 20; width: 40;"></Label>
            <Label row="0" col="1" text=" - " class="boldText"></Label>
            <Label row="0" col="2" [text]="tripPlan.arrivalTime" class="boldText" style="width: 40; text-align: right;"></Label>
            <Label row="0" col="3" [text]="tripPlan.travelTime" class="boldText" style="margin-right: 20; text-align: right;"></Label>
          </GridLayout>
          
          <StackLayout row="1" col="0" orientation="vertical">
              <GridLayout rows="auto" columns="*, auto">
                <StackLayout orientation="horizontal" row="0" col="0" style="margin-left: 20;">
                  <StackLayout *ngFor="let step of tripPlan.steps; let isLastItem = last" orientation="horizontal">
                    <Image src="res://tp_walk" stretch="none" [visibility]="step.action == 1 ? 'visible' : 'collapsed'"></Image>

                    <GridLayout rows="auto, auto" columns="auto" [visibility]="step.action == 2 ? 'visible' : 'collapsed'">
                      <Label row="0" col="0" [text]="step.route"></Label>
                      <Image row="1" col="0" src="res://tp_bus" stretch="none"></Image>
                    </GridLayout>

                    <Image src="res://tp_step_separator" stretch="none" [visibility]="isLastItem || step.action == 3 ? 'collapsed' : 'visible'"></Image>
                  </StackLayout>
                </StackLayout>

                <Image row="0" col="1" src="res://detail" stretch="none" class="middleAlignment" style="width: 10%"></Image>
              </GridLayout>
              
              <StackLayout *ngFor="let step of tripPlan.steps; let i = index" orientation="vertical" style="margin-top: 10; margin-left: 20; margin-right: 20;">
                  <StackLayout orientation="horizontal" style="margin-bottom: 5;">
                    <Label [text]="(i + 1)"></Label>
                    <Label text=". "></Label>
                    <Label [text]="step.description" textWrap="true" style="line-height: 2;"></Label>
                  </StackLayout>
              </StackLayout>
          </StackLayout>

          <MapView row="2" col="0" width="100%" height="300" (mapReady)="onMapReady($event)"></MapView>
          
      </GridLayout>  

    </StackLayout>
    </ScrollView>
    

  </GridLayout>

  <GridLayout [visibility]="isLoading ? 'visible' : 'collapsed'">
    <StackLayout class="modalLoadingStyle"></StackLayout>
    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapsed'" 
                        horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
  </GridLayout>

</GridLayout>

Cheers,