Overlap using GridLayout iOS issue

[sasabogi]

When two elements are overlapped using GridLayout, element below becomes unavailable because it is covered by another element. This is not the case with android.
Code example:

<GridLayout rows="*">
    <StackLayout row="0">
        <Button text="TEST"></Button>
    </StackLayout>
    <StackLayout row="0">
        <Button text="TEST1" style="margin-top: 50;"></Button>
    </StackLayout>
</GridLayout>

In this example the TEST button is not clickable on iOS, while on Android both are clickable.

[sasabogi]

Has anyone had this problem? Please help

[rigor789]

The 2nd StackLayout fully covers the first one, and prevents interaction.

You could move the margin to the StackLayout in this case, but the right approach depends on what you are trying to do.

[sasabogi]

I agree but on Android it also covers, but that doesn't prevent interaction. Whether that difference is natural behavior or not?

[rigor789]

I believe it's natural as the two platforms behave differently. I don't remember if it's for this purpose or not, but there is a isPassThroughParentEnabled property that might also work: https://docs.nativescript.org/api/class/LayoutBase#ispassthroughparentenabled