Variable Length in Grid Layout


#1

I am trying to recreate a UI using GridLayout where the first column can have a length that is equal to the its element. E.g i have various texts and i want the width of the col=“0” of every item to be just that element itself like this image below 03%20AM

this is what i tried

  <GridLayout columns=" auto, *" rows="*,*,*,*">
  <Label row="0" text="david:"></Label>
  <Label row="0" text="kezi" marginLeft="5"></Label>
  <Label row="1" text="david asgfdhdfchgd:"></Label>
  <Label row="1" text="kezi" marginLeft="5"></Label>
  <Label row="2" text="davfdhdfchgd:"></Label>
  <Label row="2" text="kezi" marginLeft="5"></Label>
</GridLayout>

but it doesnt give me the required results, below is what i get

, is there a way this can be achieved with the GridLayout or is there any other UI Component i can use?


#2

I think it’s not a issue with GridLayout but with label, it has problems when a bigger text becomes smaller the space is not recalculated. You can simply fix this by calling relayout of that particular label whenever you update your text.


#3

For this I would use just stacklayouts with formatted string

https://docs.nativescript.org/angular/ui/ng-ui-widgets/formatted-string


#4

I think you forgot to specify the col properties. Have a look at this Playground: https://play.nativescript.org/?template=play-tsc&id=Dq8Cx8


#5

Another Option to using just formatted strings is to have each row in the grid as a stackLayout with orientation = horizontal.
Just set the stackLayouts to have the row property and dont use coloumn properties