Variable Length in Grid Layout


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>

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?


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.


For this I would use just stacklayouts with formatted string


I think you forgot to specify the col properties. Have a look at this Playground:


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