Nativescript vertical alignment in GridLayout not working

Question

In nativescript I have some problem with StackLayout which is in a GridLayout. I cannot align the Label in StackLayout center vertical.

Here is a picture what I would like to achive:

Here you can see, that I want the exclamation icon center vertically.

But unfortunately I keep getting this:

Here is the code I use:

tns.html

<GridLayout class="formMessage warning" columns="auto,*" rows="auto">
  <StackLayout col="0" class="formMessageIcon">
    <Label class="icon fa" [text]="'fa-exclamation-circle' | fonticon"></Label>
  </StackLayout>
  <Label col="1" class="formMessageText" text="lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet" textWrap="true"></Label>
</GridLayout>

CSS

.formMessage {
  width: 100%;
  border-width: 2;
  border-color: #ff344e;
}

.formMessageIcon {
  background-color: #ff344e;
  width: 30;
}

.icon {
  vertical-align: center;
  text-align: center;
  margin-right: 2;
  font-size: 18;
  color: #2b3535;
}

.formMessageText {
  padding: 5 8;
  color: #ff344e;
}

How can I fix the icon centering? What I am doing wrong? Thank you very much!

Can you try adding verticalAlignment="center" to the StackLayout, and also try make both of the colums="*,*" instead of auto,* ? — Denko Mancheski, Oct 12 '16 at 23:17
Try to specify the `height` of the Label inside the `StackLayout` — Nikolay Tsonev, Oct 13 '16 at 05:32
When I add the verticalAlignment="center" to the StackLayout, then it won't fill with red the left part, just squish it to the center, with the icon. So it will be centered, but not just the icon. I am going to try to add a height of the icon, thanks, we will see it. (Besides if I add a specified height to the StackLayout, then the problem goes away, but it should be dynamic depending to lorem ipsum label. Min-height does not help. :( ) — ans777, Oct 13 '16 at 05:44

score 15 · Accepted Answer · answered Oct 13 '16 at 06:17

Here is how I would change it to make it work..

<GridLayout class="formMessage warning" columns="auto,*" rows="auto">
    <Label col="0" class="iconbkg" text=""></Label>
    <Label col="0" class="icon fa" [text]="'fa-exclamation-circle' | fonticon"></Label>
    <Label col="1" class="formMessageText" text="lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet" textWrap="true"></Label>
</GridLayout>

And the CSS is:

.formMessage {
    width: 100%;
    border-width: 2;
    border-color: #ff344e;
}

.iconbkg {
    width: 30;
    background-color: red;
    margin-right: 2;
}

.icon {
    width: 30;
    vertical-align: center;
    text-align: center;
    margin-right: 2;
    font-size: 18;
    color: #2b3535;
}

.formMessageText {
    padding: 5 8;
    color: #ff344e;
}

The advantage to this layout is it is actually less resource intensive than using a StackLayout; and simplifies your processing.

The trick is to use a normal Label for the background that doesn't print any text (using the .iconbkg class); then center your ! in another Label both of them in Column 0 of the data grid.

Thank you very much, this is a very clever way to solve this! I works perfectly. — ans777, Oct 13 '16 at 06:46
Yeah, the framework has fixed a lot of issues like this since that point. `vertical-align` should now work properly... — Nathanael, Apr 22 '20 at 18:43

Nativescript vertical alignment in GridLayout not working

1 Answers1