Rüdiger Rüdiger - 2 months ago 12
TypeScript Question

Insert Button into GridLayout not working in NativeScript Application

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>

Answer Source

I tried around a bit and I have no idea why the "new" code works and the older did not. I posted the working code as update into the question.