Insert Button into GridLayout not working in NativeScript Application

Question

I tried to use a Button with some Images next to it. All these should be within one row in a GridLayout. My html:

<GridLayout colums="4*,*,*,*,*,*" rows="*">
    <Button text="send rating" (onTap)="rateIt()" col="0" row="0" class="send-rating-button"></Button>
    <Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image>
    <Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image>
    <Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image>
    <Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image>
    <Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image>
</GridLayout>

Sadly it is placing the Button over the complete row and the images. Did I miss something when defining the rows/columns?

The Button and Image css:

.star-image {
    width: 30;
    margin: 10;
}

.send-rating-button {
    margin-left: 30;
    margin-right: 10;
    background-color: yellow;
    border-color:black;
    border-width: 1;
    max-width: 100;
}

Edit: I should perhaps clarify what he does. Instead of inserting each element into one cell of the GridLayout, all of the elements are shown in the center of the line above each other.

Edit2: I have no idea why it did not work before. The working code.

<GridLayout columns="*4,*,*,*,*,*" rows="*">
   <Button col="0" row="0" [text]="'RATING_AVG'|translate" class="send-rating-button" (onTap)="rateIt()"></Button>
    <Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image>
    <Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image>
    <Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image>
    <Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image>
    <Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image>
</GridLayout>

This colums="*4,*,*,*,*,*" should be colums="4*,*,*,*,*,*" — Marek Maszay

Nick Iliev Nick Iliev · Accepted Answer · 2017-08-25T11:49:07

As Marek mentioned in his comment the issue is because you are setting the first column to have a width of 4 DP (device independent pixels) due to syntax error. You can either assign greater DP value for your first row or assign relative width using 4* (means this column will be 4 times wider than column set with *)

<GridLayout colums="4*,*,*,*,*,*" rows="*">

Insert Button into GridLayout not working in NativeScript Application

2 Answers