I am trying to get some content align with in a specific way

Question

I am trying to get some content align with in a specific way and wanted some thoughts on how you would build this Weight of 1 seems to fill the full width so I am nesting that and assumed I could put something to the right of it but its off the screen thread

David Corrado · Answer

```Row Row Text test Spacer modifier = Modifier weight 1f Text test2 Text test3 ```

David Corrado · Answer

Here is my code But text3 is off the screen How do I build something like this I know I could put them all within the row and it would work I am trying to do something really like this which would not work for just putting it into the nested row ```Row Row Text test Spacer modifier = Modifier weight 1f Text test2 Row Text test Spacer modifier = Modifier weight 1f Text test2 Text test3 ```

dorche · Answer

What do you expect to happen if the 5 strings don t find on one row by their own E g with different text value Anyway you probably want to get rid of the weight spacer and instead do `horizontalArrangement = Arrangement SpaceBetween` On your Rows

Chris Sinco [G] · Answer

Do you have a visual of what you want to achieve

Chris Sinco [G] · Answer

Depending where the parent Row is you might need to specify a width Even fillMaxWidth Otherwise the weight modifiers will push things off screen because the parent Row is sized to its contents with no constraints

David Corrado · Answer

Basically what I want is the 45m and Nov 1 to be on first line left and right aligned where its impossible to overflow them into each other Second line is Image Jogging Text and to the right Time Then to the right the chevron icon I will explore without weights Let me know if you have any other suggestions I was hoping to use a weight within this content but the parent still can have something to the right and wrap content I was hoping to not have to do something that I have to define a specific width and just throw it at the end and have it just work It seems weight forces it to be as large as possible ignoring the parent contents

Francesc · Answer

You have to give your rows a weight You could also consider creating a `Layout` for more flexibility That would be my choice

Stylianos Gakis · Answer

Maybe look into this <https kotlinlang slack com archives CJLTWPH7S p1653337434396329 thread ts=1653286229 852159 amp cid=CJLTWPH7S> And do something like ```Card Row verticalAlignment = Alignment CenterVertically Column Modifier weight 1f true HorizontalTextsWithMaximumSpaceTaken Text 45m textAlign gt Text Nov1 textAlign = textAlign HorizontalTextsWithMaximumSpaceTaken Text Jogging or running textAlign gt Text 10 45 AM textAlign = textAlign style = MaterialTheme typography h4 Icon Icons Default ArrowForward null Modifier size 40 dp ``` Is it what you re going after

Stylianos Gakis · Answer

`HorizontalTextsWithMaximumSpaceTaken` name isn t necessarily true since it s two slots they could also not be texts in your use case and you can add the running icon in there or whatever HorizontalItemsWithMaximumSpaceTaken maybe sweat smile I am bad at naming stuff

David Corrado · Answer

Wow Super helpful < Stylianos Gakis> Appreciate all the effort Ill work with your code chunk Based on your demos seems like what I want

David Corrado · Answer

Also < Francesc> tried out what you suggested with putting a weight on the row and that seemed to work too ```Row Row modifier = Modifier weight 1f Text test Spacer modifier = Modifier weight 1f Text test2 Text test3 ``` Like the above Basically I wanted |test test2test3| which is what the above does

Stylianos Gakis · Answer

This has the problem of if test1 is too big it will gobble up the entire space and make test2 and test3 I think non existent or super tiny Try it with a small screen and or a big test1 to see

Francesc · Answer

that s what the `fill` parameter on `weight` can be used for set it to `false` if you want to ensure the non weighted item is not pushed off the sceren

Stylianos Gakis · Answer

With the snippet above you get these cases when things get too cramped Is this really what you want Things do get hidden completely