Stacklayout does not layout properly.

[RoyiNamir]

I have this simple layout markup :

<StackLayout  orientation="horizontal" #myStack>

		<StackLayout  width="300" backgroundColor="red">
		</StackLayout>

		<StackLayout width="300" backgroundColor="green">
		</StackLayout>

</StackLayout>

As you can see , both are same width of 300:

Let's see this :

Notice that green is also 300 but we only see a part of it since 300+300 > screen size.

Ok so let's try to animate #myStack (!!) to the left , in order to see the left green :

  ngOnInit(): void {
        setTimeout(() => {
               this.myStack.nativeElement.animate({
                translate: { x: -300, y: 0 },
                duration: 2000,
                curve: enums.AnimationCurve.easeIn
            });
         },1000)
   }

??

What is this white area on the right ? there should be also a green section there

Basically this is the situation :

So i'm expecting the green from the right to be scrolled to the left , i'm basically trying to move #myStack left.

Bug ?

PLAYGROUND

[NickIliev]

@RoyiNamir this is expected behavior.
What is happening is that by default the root layout will have an effective width (and height) as the screen size.
You need to explicitly create the wider container if you want to have an effective width larger than the screen width.

There are several approaches on how to achieve that.

• use container with fixed width - demo Playground here

<GridLayout rows="auto, *" columns="600" backgroundColor="lightgray">
	<Button row="0" text="animate" (tap)="animate()"></Button>
		<StackLayout row="1" orientation="horizontal" #myStack>
			<StackLayout width="300" backgroundColor="red">
				<Label text="Label"></Label>
			</StackLayout>

			<StackLayout width="300" backgroundColor="green">
				<Label text="Label"></Label>
			</StackLayout>
		</StackLayout>
</GridLayout>

Note that our container GridLayout has columns set to 600.

• Another option is instead of creating fixed size container to use ScrollView (which will measure its children so the children should have predefined size - in your case width="300") - demo Playground here

<GridLayout rows="auto, *" backgroundColor="lightgray">
	<Button row="0" text="animate" (tap)="animate()"></Button>
	<ScrollView row="1" orientation="horizontal"> <!-- another option is using ScrollView-->
		<StackLayout orientation="horizontal" #myStack>
			<StackLayout width="300" backgroundColor="red">
				<Label text="Label"></Label>
			</StackLayout>

			<StackLayout width="300" backgroundColor="green">
				<Label text="Label"></Label>
			</StackLayout>
		</StackLayout>
	</ScrollView>
</GridLayout>

In the example above the container element is not needed (used just to create the animate Button).
The ScrollView will measure its children (300 + 300 = 600 width) and will take the space needed.

[RoyiNamir]

@NickIliev NO words to thank you.

[RoyiNamir]

@NickIliev This seems to work with root gridview.
Why ain't it working with root stacklayout ?

<StackLayout  width="600" backgroundColor="gray">
 	<StackLayout  orientation="horizontal" width="600" #myStack>
		<StackLayout width="300" backgroundColor="red">
			<Label text="Label"></Label>
		</StackLayout>

		<StackLayout width="300" backgroundColor="green">
			<Label text="Label"></Label>
		</StackLayout>
	</StackLayout>

</StackLayout>

[NickIliev]

@RoyiNamir I have investigated further and it seems that the default behavior for layouts with a larger width is to be clipped to fit the screen width (height).
The only thing that would make a layout to render itself with larger width/height than the current screen is when its size (or the size of any nested children) is set to infinity. That would prevent the explicit clipping as there is no mechanism to clip from infinity. Of course, we can not directly set our width/height to infinity but in the source code, this is done when we are setting auto for Grid's rows and columns or when we use ScrollView.

[RoyiNamir]

@NickIliev But if you look at your solution :

<GridLayout rows="auto, *" columns="600" backgroundColor="lightgray">

We're not setting columns="auto" , but 600.

So how does it fit with : "this is done when we are setting auto for Grid's rows and columns"

Rows auto height wasn't the issue. The issue was the width. And we're not setting it to auto here. So how come gridview's 600 width is counted while stacklayout's width 600 is not ?

[NickIliev]

@RoyiNamir AbsoluteLayout is also measured with infinity so it sholud also do the trick!