More than one layout child inside a ContentView


I finally managed to deploy my program to iOS but as soon as it opens it automatically crashes.
And i don’t know what the error might be.

I already commented my AbsoluteLayouts at the end of the html but it still doesnt work. And i have only one parent Layout per page. I think at least.


My first page is the Login

Login.html code:

<label class="text-title" text="FastCanteen"></label>

<StackLayout class="topLayout">

  <label text="NIF"></label>
  <TextField hint="NIF" keyboardType="number" [(ngModel)]="user.nif" autocorrect="false" autocapitalizationType="none" backgroundColor="white"></TextField>

  <label text="Password"></label>
  <TextField hint="Password" secure="true" [(ngModel)]="user.password" backgroundColor="white"></TextField>

  <Button text="Login" class="submit-button" (tap)="preLogin()"></Button>


<StackLayout class="bottomLayout">
  <label class="info" text="Are you not signed up yet?"></label>
  <Button class="link" text="Register here free!" (tap)="register()" [nsRouterLink]="['/main']" pageTransition="slideRight"></Button>

<AbsoluteLayout >
  <image class="imageRhombus" src="res://rhombus"></image>

Any ideias on what the problem may be?


Yeah, that is a really annoying error.

I understand why you’re confused,.
The ContentView is the Page’s content minus the ActionBar and on iOS you can only be one top-level Layout.

You have a Label, two StackLayouts and an AbsoluteLayout. :wink:

If you just wrap everything in a StackLayout it should work.


That was my original idea and i did exactly what you said.
I wrapped everything around a StackLayout and it didn’t work. It keeps giving me the same error.


I have similar problem earlier try to add all your HTML file in

// Add here 


Yea that fixed it. But it is not displaying some information.
I puted all my code inside a parent Layout but it doesnt display the title. Trying to check what the problem could be. Thanks anyway


Edit: @pap5508 @m_abs

I have several pages on my application. My login page is working and as soon as i redirect to the HomePage it provides me with the same error. "More than one layout child inside a ContentView"
But they layout of my HomePage only has one Layout parent. I dont see what the problem might be… Any ideias?


<FlexboxLayout flexDirection="column">
    <label class="text-title" text="FastCanteen"></label>
    <StackLayout orientation="vertical" flexGrow="1" backgroundColor="transparent">
        <StackLayout marginTop="20" marginBottom="30">
            <image class="imageAccountCircle" src="res://ic_account_circle_white"></image>
            <Label id="userNameTop" class="labelName" textWrap="true"></Label>
            <Label class="labelNIF" [text]=user.nif textWrap="true"></Label>
            <StackLayout marginLeft="70" marginRight="70" marginBottom="60" backgroundColor="#444444" borderRadius="30%" opacity="0.7"
                <Label id="balance" class="labelBalanceValue"></Label>
                <Label class="labelTextBalance" text="Available Balance"></Label>
        <div *ngIf="isVisible">
            <StackLayout (tap)="accountTransactions()" [nsRouterLink]="['/main']" pageTransition="slide" marginBottom="10" marginLeft="20"
                marginRight="20" verticalAlignment="bottom" backgroundColor="#444444">
                <GridLayout rows="auto auto auto" columns="* 75">
                    <Label class="labelLastBill" text="Last Bill" textWrap="true" row="0" col="0" marginTop="10"></Label>
                    <Label id="valueLastBill" class="labelValue" textWrap="true" row="1" col="0"></Label>
                    <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
                    <Label id="typeLastBill" class="labelTypeOfBill" textWrap="true" row="2" col="0" marginBottom="10"></Label>
        <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
            [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
    <image class="imageRhombus" src="res://rhombus"></image>


I commented the AbsoluteLayout and it works.


Your home page has 2 Parent layouts, the FlexLayout and the AbsoluteLayout. You would need to wrap both layouts in another layout. Maybe wrap them in a StackLayout?


Will this StackLayout ocupy the full Screen and let my components with the same size as they were before?


It should do, yes. I’ve never worked with flex or absolute layouts before so I can’t be certain


It didn’t adapt. I’ll just have to find a way to go around the problem. thanks anyways!


maybe try adding the absolute layout into the flex layout?


Yea i tried that. The bottombar gets out of place if i add the AbsoluteLayout inside my Parent FlexLayout.
The bottombar must always be at the end…


Have you tried adding it between the stack and flex layouts?


Not yet. Was thinking on that. Will try that.

Deployment for iOS is giving me a lot of trouble and a lot of my components made in Android are out of place. I was kinda expecting for the deployment to be a lot easier.
I’ll have to make a lot of cross-platform code i guess.


Yeah, deploying for ios screws up a lot