Hi, I have a question regarding `.wrapContentSize(...

# compose

[Pavel Měsíček]

Hi, I have a question regarding .wrapContentSize() , what am I doing wrong if Text is still taking up full width of the row? I would like to wrap background around visible text. Or does somebody have some workaround?

Column(modifier = Modifier.fillMaxWidth()) {
                    Row(
                        modifier = Modifier
                            .fillMaxWidth(0.7f)
                            .wrapContentSize()
                            .background(IntouchTheme.colors.brandGreen, shape = IntouchTheme.shapes.small),
                    ) {
                        Text(
                            text = timeLine.content,
                            style = IntouchTheme.typography.regularL,
                            color = IntouchTheme.colors.fontPrimaryWhite,
                            softWrap = true,
                            modifier = Modifier
                                .padding(vertical = Grid.d2, horizontal = Grid.d3)
                                .wrapContentSize(),
                        )
                    }
                }

[Stylianos Gakis]

wrapContentSize does wrap if your component does not need all of the space you are giving it. In this case, your text does in fact need the entire width, since it's long enough to wrap to the next line.

What did you expect to see here btw as the result? Did you want the text to look more "balanced" where the two rows had more or less the same number of letters in them?

[ColdDev20]

Incase short text still un wrap content ?

[Stylianos Gakis]

Oh, you probably wanted the empty space on the right side there to not exist right? I think I've seen an issue filed for this, I am not sure it's possible atm

[Stylianos Gakis]

https://issuetracker.google.com/issues/206039942

[Stylianos Gakis]

In that same issue, there is a workaround provided in the comment https://issuetracker.google.com/issues/206039942#comment32 which even does this without relying on sub-composition.

Give it a try to see if it does what you need, and if not perhaps it can give you an idea of how to use it for your need?

[Pavel Měsíček]

Thank you 🙏