My attempt to use a Button alongside some Images in a single row within a GridLayout resulted in the Button covering the entire row along with the images. Here is the HTML code I used:
<GridLayout columns="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>
I suspected that there might be an issue with the way I defined the rows/columns, causing this layout problem. Additionally, here are the styles for the Button and Images:
.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;
}
After further review and experimentation, it turned out that instead of each element being placed in one cell of the GridLayout, they were all centered on top of each other. Here is the corrected code that now works as intended:
<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>