ans777 ans777 - 1 month ago 40
CSS Question

Nativescript vertical alignment in GridLayout not working

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:

enter image description here

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

But unfortunately I keep getting this:

enter image description here

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!

Answer

enter image description here

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.

Comments