More than one layout child inside a ContentView


#1

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.

Error:

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>


<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>

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

Any ideias on what the problem may be?


#2

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.


#3

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.


#4

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

 <GridLayout>
// Add here 
 </GridLayout>

#5

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


#6

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?

HomePage.html:

<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>
        <StackLayout>
            <StackLayout marginLeft="70" marginRight="70" marginBottom="60" backgroundColor="#444444" borderRadius="30%" opacity="0.7"
                height="100">
                <Label id="balance" class="labelBalanceValue"></Label>
                <Label class="labelTextBalance" text="Available Balance"></Label>
            </StackLayout>
        </StackLayout>
        <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>
                </GridLayout>
            </StackLayout>
        </div>
    </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>
<AbsoluteLayout>
    <image class="imageRhombus" src="res://rhombus"></image>
</AbsoluteLayout>

#7

I commented the AbsoluteLayout and it works.


#8

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?


#9

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


#10

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


#11

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


#12

maybe try adding the absolute layout into the flex layout?


#13

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…


#14

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


#15

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.


#16

Yeah, deploying for ios screws up a lot