Layout issue when using custom components in a GridLayout

When using this type of layout in conjunction with Angular components (one of which uses a ListView underneath) creates the following troublesome layout.

I would expect this layout to just work:

<GridLayout rows="*,100" columns="*">
    <test-list-cmp row="0" col="0"></test-list-cmp> <!-- This has ListView underneath -->
    <test-cmp row="1" col="0"></test-cmp>
</GridLayout>

Simple sample project which demonstrates this problem: https://github.com/NathanWalker/layout-bug-demo

Screenshot of problem…

[m-abs]

Hi @NathanWalker,

I don’t think it has anything to do with the ListView. If you wrap the custom components inside a StackLayout and set row/col on that, the problem goes away (at least on Android).

<ActionBar title="Test" icon="" class="action-bar">
</ActionBar>
<GridLayout rows="*,100" columns="*">
  <StackLayout row="0" col="0">
    <test-list-cmp></test-list-cmp>
  </StackLayout>
  <StackLayout row="1" col="0">
    <test-cmp></test-cmp>
  </StackLayout>
</GridLayout>

I can’t find the link with the explanation and the workaround I once had.

As I remember it, the problem is that layout properties are not inherited by the custom components. (It might have something to do with them being wrapped inside a ProxyViewContainer, but I can’t remember).

So you either have to wrap the custom component inside a StackLayout OR add the layout properties inside you custom component like this:

<GridLayout rows="100" columns="75,*" [row]="cRow" [col]="cCol">
    <Label text="Sample" row="0" col="0"></Label>
    <Label text="This layout issue is troublesome." row="0" col="1"></Label>
</GridLayout>

import { Component, Input } from '@angular/core';

@Component({
	moduleId: module.id,
	selector: 'test-cmp',
	templateUrl: 'test-cmp.component.html'
})
export class TestCmpComponent {
  @Input() cRow: number;
  @Input() cCol: number;
}

[m-abs]

We’ve been using another workaround for a while.

If you change the selector to include an attribute selector, e.g. from test-cmp to test-cmp, [test-cmp] you can use the component like this:

<GridLayout rows="*,100" columns="*">
    <StackLayout test-list-cmp row="0" col="0"></StackLayout> <!-- This has ListView underneath -->
    <StackLayout test-cmp row="1" col="0"></StackLayout>
</GridLayout>

It is a lot prettier than the old workaround.