ActivityIndicator not showing if outside stacklayout

Question

I have this simple page layout:

<ActionBar title="Events" class="action-bar"></ActionBar>
<StackLayout class="page">
    <ListView [items]="events" class="list-group" [class.visible]="listLoaded" *ngIf="events">
        <ng-template let-item="item">
            <StackLayout class="list-group-item" (tap)="viewDetails(item)">
                <Label class="h3" [text]="item.nome"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
</StackLayout>

When the component is loading data the activity indicator is displayed at the top of the page. Now I want it to appear at the at the center of the page, so I popped it out from the stacked layout

<ActionBar title="Events" class="action-bar"></ActionBar>
<ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>

<StackLayout class="page">
    <ListView [items]="events" class="list-group" [class.visible]="listLoaded" *ngIf="events">
        <ng-template let-item="item">
            <StackLayout class="list-group-item" (tap)="viewDetails(item)">
                <Label class="h3" [text]="item.nome"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
</StackLayout>

but it is not visible anymore! Any Idea of what is going on?

score 0 · Answer 1 · answered Jun 29 '17 at 19:09

0

Put it in a StackLayout

<StackLayout horizontalAlignment="center" [visibility]="isLoading ? 'visible' : 'collapse'" verticalAlignment="center">
    <ActivityIndicator [busy]="isLoading"></ActivityIndicator>
</StackLayout>

answered Jun 29 '17 at 19:09

Fetrarij

7,176
3
27
35

This didn't help! If I put this StackLayout component outside the other StackLayout, it's not visible either. If I put it inside, it's visible but still not vertically aligned in the page! – Marco Gagliardi Jun 30 '17 at 17:01

score 0 · Answer 2 · answered Jun 30 '17 at 17:20

Ok, it was just an overlapping + css problem. The page class sets the background color property of the StackLayout, which is always overlapped to the ActivityIndicator, thus making it not visible. Of course there are proper ways to handle this situation, and also to make the ActivityIndicator visible and vertically centered even inside a .page element

Aosi · Answer 3 · 2020-06-11T01:43:26.463

By default all pages, frames in nativescript-angular require at least one layout as a parent or top layout, this means, all your elements should be contained inside a layout.

What you can do is use an absolute or grid layout, and inside of them add all your other elements. Once you are able to see your spinner, just add some CSS to center it.

Or simply:

<GridLayout class="page">
    <ListView [items]="events" class="list-group" [class.visible]="listLoaded" *ngIf="events">
        <ng-template let-item="item">
            <StackLayout class="list-group-item" (tap)="viewDetails(item)">
                <Label class="h3" [text]="item.nome"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" height="100" width="100" color="red" backgroundColor="gray" class="spinner"></ActivityIndicator>
</GridLayout>

this layout by default will set both elements in the center of the page and use as much height and width as possible, so we require to add some styles to the spinner, hope this helps.

ActivityIndicator not showing if outside stacklayout

3 Answers3