Layouts for two labels in same row

[pacome2017]

Hello,

I’m trying to display two labels on the same row in an *ngFor list. I’ve tried with StackLayout and GridLayout, but I have a problem with both of them.
With StackLayout :

<StackLayout *ngFor="let values of values">
<StackLayout orientation="horizontal">
 <label textWrap="true" text="longTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongText"></label>
<label text="XXX"></label>
</StackLayout>
</StackLayout>

The problem with StackLayout with the ‘XXX’ label is not displayed. (here’s a picture of the rendering)

With GridLayout :

<StackLayout *ngFor="let values of values">
<GridLayout columns="*,80" orientation="horizontal">
<label column="0" textWrap="true" text="longTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongText"></label>
<label column="1" text="XXX"></label>
</GridLayout>
</StackLayout>

Problem with GridLayout, the ‘XXX’ is displayed, but on top of the other label, despite using different columns (here’s a picture of the rendering)

I’m a bit confused why those two layouts don’t work for that simple task … what am I doing wrong ?

[manojdcoder]

StackLayout may not work here as you have text wrap. Use formatted strings if possible.

It’s just a typo with GridLayout, the property is just col not column.

[pacome2017]

Thanks @manojdcoder, it was indeed a typo with GridLayout. It’s not my favorite option though as the ‘XXX’ label is align to the right regarding of the first label length. So it will be my backup plan now that I have the correct script

I tried formatted string, and it is solving my problem, but it seems Span tags cannot be styled the same way label can. (e.g. css borders are not applied)

[manojdcoder]

In case if you want the label to stick on right in StackLayout, keep the width fixed for first label so it still works.

[pacome2017]

I want the second label to be adjacent to the first in Gridlayout and not aligned to the right. I may be able to specify the width of the first label but its width is not fixed.

I think it is the the best solution though, I can compute the width of the first label and give it to the gridlayout. Then the second label can be adjacent and centered (where it is not with formatted string)

[pacome2017]

Computing the width of the first label and giving it to gridlayout is not the solution in fact, it will take all the space and hide the second for long text.
I want the second label to be adjacent to the first, not aligned to the right, but still always be displayed (and pushed to the right if the first label is long)
It seems a job for StackLayout, too bad it doesn’t work with textWrap

[manojdcoder]

Its not a job of any layout, if you want labels to be adjacent (with textwrap) its only possible by using formatted strings.

[pacome2017]

Yeah well with with formatted string, some styling don’t work and the second label is adjacent, but on the second line of the first span, so too much adjacent
What I like about gridlayout is that even when the textwrap put the first label on two lines, the second can be centered vertically (on the middle of the two lines), but then, unless I always align it to the right, it won’t work

[fthuin]

You can do it easily with the GridLayout, I think you are just making typos (which makes the two labels place in col 0). The property for child of GridLayout is col not column, like this

<StackLayout *ngFor="let values of values">
    <GridLayout columns="auto,*" orientation="horizontal">
    <Label col="0" textWrap="true" text="longTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongText"></Label>
    <Label col="1" text="XXX"></Label>
    </GridLayout>
</StackLayout>

What you can also do is to put horizontalAlignment="left" or horizontalAlignment="right" on the Label element, to have the text to justify right or left.

[pacome2017]

yes there was a typo for the gridlayout, but this does not solve my problem, horizontalAlignment=“left” does not apply correctly on the second label.

<StackLayout *ngFor="let values of values">
    <GridLayout columns="auto,*" orientation="horizontal">
    <Label col="0" textWrap="true" text="longTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongTextlongText"></Label>
    <Label col="1" horizontalAlignment="left" text="XXX"></Label>
    </GridLayout>
</StackLayout>

leads to the second label not displaying with longtext (in fact the textWrap="true" is not working in that case), and if I change columns="auto,*" to columns="*,auto", textWrap="true" is working but the second label is not aligned to the left

[fthuin]

Please post a screenshot of what you need as a result, because this works perfect for me:

Long text first – {N} Playground

Long text second – {N} Playground

[pacome2017]

with columns=*,auto here’s what I get :

with columns=auto,* :

I use the first one, but I’d like the second label to be aligned to the left, next to shortText. I did specify horizontalAlignement="left" textAlignement="left" and it doesn’t work in this example.

[carlos]

You can use FlexboxLayout as well. It’s always my first option. Default orientation is row.