Nativescript: Vertical-center text inside grid layout with vertical-align stretch on android

[einicher]

Text in #activeLabel stays on top in android, is centered vertical on ios (like i want it):
Nesting it with StackLayout or GridLayout does not change anything, except its then not centered on ios either.
So what do you do, when you want text inside a stretched element to be top, center or bottom in verticalAlignment?

        <ListView row="1" width="100%" id="contractsListView" items="{{ contractItems }}" itemTap="tapItem" style="background-color: #e5e6da; padding: 0; margin: 0;">
            <ListView.itemTemplate>
                <GridLayout rows="*" columns="100,*" style="background-color: #e5e6da;">
                    <Label id="activeLabel" row="0" col="0" visibility="{{ status_on }}" text="aktiv" style="text-align: center; color: #fff; padding: 0; font-size: 20; vertical-align: stretch; background-color: #00853e;" />
            <Label row="0" col="1" text="{{ contractId }}" textWrap="true" style="vertical-align: stretch; font-size: 20; padding: 20; background-color: #e5e6da;" />
                </GridLayout>
            </ListView.itemTemplate>
        </ListView>

[NickIliev]

@einicher you can set verticalAligment to center.top,bottom or stretch. So you could use center.

Sets the vertical alignment of the current view within its parent. Possible values: "top", "center", "bottom", "stretch".

<Label id="activeLabel" row="0" col="0" visibility="{{ status_on }}" text="aktiv" verticalAligment="center" />

[einicher]

i need both, vertical stretch for the background color and vertical center for the text position. On Android the text stays on top when using stretch. Like here in the second list item:

[einicher]

this produces the same outcome:

        <ListView row="1" width="100%" id="contractsListView" items="{{ contractItems }}" itemTap="tapItem" style="background-color: #e5e6da; padding: 0; margin: 0;">
            <ListView.itemTemplate>
                <GridLayout rows="*" columns="100,*" style="background-color: #e5e6da;">
                    <StackLayout row="0" col="0" visibility="{{ status_on }}" style="vertical-align: stretch; background-color: #00853e;">
                        <Label text="aktiv" style="vertical-align: center; text-align: center; color: #fff; padding: 0; font-size: 20;" />
                    </StackLayout>
                    <Label row="0" col="1" text="{{ contractId }}" textWrap="true" style="vertical-align: stretch; font-size: 20; padding: 20; background-color: #e5e6da;" />
                </GridLayout>
            </ListView.itemTemplate>
        </ListView>

thats what i mean with nesting it with grid or stack layout doesn't change anything, except on ios its on top now too.

[NickIliev]

Hey @einicher

In the example from your first post the item template is creating a grid and the first column is set to take 100 height. However, the label inside this column will be placed by default on top left position for android.
To change its position is it can be always visualized in the exact center you can set both _text-center_ and v_ertical-align_

style="text-align: center; vertical-align: center;"

So in your example you can do the following:

<GridLayout rows="*" columns="100, *" style="background-color: #e5e6da;">
    <Label row="0" col="0" text="aktiv" visibility="{{ status_on }}" style="text-align: center; vertical-align: center; color: #fff; font-size: 20; background-color: #00853e;" id="activeLabel" />
    <Label row="0" col="1" text="{{ name }}" textWrap="true" style="text-align: center; vertical-align: stretch; font-size: 20; padding: 20; background-color: #e5e6da;" />
</GridLayout>

[einicher]

yes, i know, thats pretty obvious and has nothing to do with my problem.
i need both, stretch and center, but its not doing it.
your suggestion looks like this:

[einicher]

or should the rows="*" make the Label to stretch and tahts not working?

[NickIliev]

Hey @einicher

I've tested your case and indeed at this moment there is no exposed property that can stretch and center vertically. I will look into this case and try to find a native solution that you can use (and will report back when I have some more info)

[einicher]

Thank you very very much!

[NickIliev]

Hey @einicher

I wasn't able to find a solution for this case except for some native XML solutions which are not applicable.
Perhaps you can center your label vertical (no stretching) and simulate the stretching by applying the same color to your cell. From UX point of view, the final result is what you are desiring.

<GridLayout rows="*" columns="100, *" style="background-color: #00853e;">
    <Label row="0" col="0" text="aktiv"  style="text-align: center; vertical-align: center; color: #fff; font-size: 20; background-color: #00853e;" id="activeLabel" />
    <Label row="0" col="1" text="some text that can be long text in order to wrap it" textWrap="true" style="text-align: center; vertical-align: stretch; font-size: 20; padding: 20; background-color: #e5e6da;" />
</GridLayout>

this code result the following:

The only change is that I am creating default color for the cell container (which is the same as the centered label) and then applying the secondary color on the label that wraps on several lines and has paddings set

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.