Alignment of cells in a row

I haven’t been able to figure out how to align four cells of a row so that one cell (with text) has left alignment and other three aligned right. As this is a repeated list of items, end result should be that all items of each row are aligned the same way. For example, all the items of the second cell should have neat alignment and rows would look like real tables. Now that is not the case. Each cell has been defined to be 25% of the row but alignment still is “broken” and seems to depend on length of the text in each cell. Each cell has a text item.

All alignment setting for the cells and text items are set “right” and “left”.

So what am I doing wrong here…?

I have noticed the same thing and in the end i didnt use that way because i couldnt figure it out…

Did you find a way to get around that and produce neat table listings?

The only way i find this is possible, is by defining a set px size for each shell which means it doesnt change size depending on screen size

OK. I thought about that but there are obvious downsides, but maybe I have to accept it as a “prototype known issue”:slight_smile:

Actually, i also found an other solution, but its a bit complicated.
this is the result, ignore the special container i used it in order to be able to see that the size is the same.

So to make it this way, you have to leave the shells defined in % and just define the size of the thing you have in the shell (and of course make them all the same size).
But this way, you can use the same formula in all components, maybe something like this,
(systemVars.dimensions.screen.width - 200) / (number of boxes in one row)
so you can make it adjust in different screen sizes.
I think thats the best way @ahannula

1 Like

Thanks. I’ll this out!

Just would like to highlight that this issue is yet to be solved properly

I have submitted a tracker here: Unable to allign row | Voters | AppGyver