CODEWITHSUNDEEP
nativescript
Dries Cleymans
Dries Cleymans

Reputation: 890

NativeScript StackLayout let a child element take remaining width

In the NativeScript StackLayout, I have three elements A, B and C. I want the middle element B to take up all the available space. This is what i want:

|ABBBBBBBBBBBBC|

I'm trying with this simplified code. A and C are labels with a fixed width, B is a progress bar.

<StackLayout orientation="horizontal" verticalAlignment="center">
    <Label text="1" width="50"></Label>
    <Progress value="50" maxValue="100"></Progress>
    <Label text="1" width="50"></Label>
</StackLayout>

What happens is that the progress bar fills up the remaining space of the StackLayout, leaving no space for the last label. Only the first label and the Progress bar itself are drawn on the screen, like this:

|ABBBBBBBBBBBBB|C

So the C elements is drawn beyond the screen.

If I place the 2 labels in front, sizing looks ok.

What am I doing wrong here?

Upvotes: 0

Views: 1009

Answers (1)

davecoffin
davecoffin

Reputation: 517

Use a GridLayout. 

<GridLayout columns="50, *, 50">
    <Label text="1" col="0"></Label>
    <Progress value="50" maxValue="100" col="1"></Progress>
    <Label text="1" col="2"></Label>
</GridLayout>

Upvotes: 3

Related Questions