Layouts overlaying on top of the other in iOS but not Android


#1

Hi, my layout appears fine in Android but in iOS they are overlaying one on top of the other. There are input fields and sign in buttons but none of them are accessible since they are overlaid. In Android this is all fine. Any ideas?

Thank you in advance!


#2

It near impossible without your code - can you share the code of this particular view please?


#3

Haha sure yes that would be necessary. Thank you for responding, here you go:

<GridLayout>

    <StackLayout orientation="vertical" class="the-container-stuff">

        <Image src="res://thelogo" stretch="aspectFit" horizontalAlignment="center" class="the-logo"></Image>

        <StackLayout orientation="horizontal" class="default-row">
            <Label class="user-icon" text="icon for user name" horizontalAlignment="left"></Label>
            <TextField class="email-stuff" keyboardType="email" hint="bla bla" autocorrect="false" autocapitalizationType="none" horizontalAlignment="right"></TextField>
        </StackLayout>

        <StackLayout orientation="horizontal" class="default-row">
            <Label class="pass-icon" text="icon for password" horizontalAlignment="left"></Label>
            <TextField secure="true" class="start-text" keyboardType="email" hint="bla bla" autocorrect="false" autocapitalizationType="none" horizontalAlignment="right"></TextField>
        </StackLayout>

        <StackLayout orientation="horizontal" class="default-row">
            <Label class="switch-text" text="the switch here" horizontalAlignment="left"></Label>
            <Switch class="switch-stuff" checked="false" horizontalAlignment="right" visibility="visible"> </Switch>
        </StackLayout>

        <Button text="click here to sign in" (tap)="signInStuff()" class="the-button"></Button>
        <Label class="link" text="need help?"></Label>

    </StackLayout>

    <DockLayout dock="bottom" class="container-btm">
        <StackLayout orientation="horizontal" horizontalAlignment="center" verticalAlignment="bottom" class="sign-up-area">
            <Label text="sign up by"></Label>
            <Label class="link" text="clicking here"></Label>
        </StackLayout>
    </DockLayout>

</GridLayout>

#4

Cool, do you also have a screenshot of both platforms when you run this code?


#5

Thank you, I do not, just that in android it all displays correctly but in iOS they are stacked upon each other and I cannot type anything or click anything due to the said stacking. In Android I can type and click the button without any issues.

Clarification: It all appears the same but nothing is actually clickable on iOS. Like I cannot type into the input fields or tap the sign in button. It is as if the screen is disabled but in android I can do everything.


#6

@johnbonam did you find a solution for this?
I experience the same - nothing to do with the ProUI, any layout over other layout/components (which mainly goes to AbsoluteLayout over stack/grid) is click-through to components bellow on Android but not on IOS.