So, I have cards with text in. I add a vertical sp...

# compose-android

[Rohan]

So, I have cards with text in. I add a vertical spacer like so, in a row:

Row (modifier = Modifier.fillMaxSize()) {
Spacer(
modifier = padding_modifier.fillMaxHeight()
.background(MaterialTheme.colorScheme.error).width(10.dp))
Card(modifier = padding_modifier.shadow(3.dp)) {..}}


The row is displayed in a column that is vertically scrollable.

My problem is that the spacer is not displayed visually, I assume due to some sizing problems created by the vertical scrolling.

Any pointers on how to fix this would be appreciated :)

[Stylianos Gakis]

Your spacer seems to have 0 width.
Although hard to tell with this code formatting 😵‍💫

[Rohan]

Ah sorry it does have width:

Row (modifier = Modifier.fillMaxSize()) {
        Spacer(
            modifier = padding_modifier.fillMaxHeight().background(MaterialTheme.colorScheme.error).width(10.dp))
Card(modifier = padding_modifier.shadow(3.dp)) {..}
}

[Rohan]

Is that any better? I've not used slack formatting vefore

[Stylianos Gakis]

What is padding_modifier in your case? 🧐
Also as far as formatting goes, this is better yes. I’d just let my IDE auto-format it, and then copy paste it exactly in the code block as you did in this message 🤗

[Rohan]

Here is a more complete snippet:

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    post_real.post_card(post = post_real, image_loader = image_loader, nav_controller = nav_controller, true)

    // Comments
    if (comments != null) {
        val padding_modifier = Modifier.padding(10.dp);
        comments.traverse { node: CommentNode, depth: Int ->

            Card(modifier = padding_modifier.shadow(3.dp)) {
                Row (modifier = Modifier.fillMaxHeight()) {
                        Spacer(
                            modifier = padding_modifier.fillMaxHeight()
                                .background(MaterialTheme.colorScheme.error)
                                .width(10.dp)
                        )

                    Column {
                        Row(
                            verticalAlignment = Alignment.CenterVertically,
                            modifier = padding_modifier.fillMaxWidth()
                        ) {
                            AsyncImage(
                                model = node.user?.avatar_url,
                                contentDescription = "The avatar for the user: " + (node.user?.username),
                                modifier = Modifier
                                    .width(25.dp)
                                    .height(25.dp)
                                    .shadow(3.dp, CircleShape)
                                    .clip(CircleShape)
                            )
                            Spacer(modifier = Modifier.size(20.dp))
                            Column {
                                Text(
                                    text = node.user?.display_name + " / @" + node.user?.username,
                                    fontWeight = FontWeight.Bold
                                )
                            }
                        }

                        if (node.content != null) {
                            Material3RichText(modifier = padding_modifier) {
                                Markdown(content = node.content.trim())
                            }
                        }
                    }
                }
            }
        }
    }
}

padding_modifier in this case is Modifier.padding(10.dp)

[Rohan]

Using intrinsic heights has fixed my problem.

[Rohan]

https://stackoverflow.com/questions/71080209/jetpack-compose-row-with-all-items-same-height

[Rohan]

Oh, nevermind it won't let me use non-fixed sizes Asking for intrinsic measurements of SubcomposeLayout layouts is not supported.

Not sure why this has to be so hard to do

[Rohan]

Finally got it working 😄 just had to use a ConstraintLayout: https://stackoverflow.com/a/67203900