I have an expandable text in LazyColumn with rever...

# compose

[Divyansh Kushwaha]

I have an expandable text in LazyColumn with reverseLayout, when I click expand, the text expands upwards. I want it to expand downwards. Any ideas how can I achieve this?

Screen_recording_20240313_230720.mp4

[Zach Klippenstein (he/him) [MOD]]

Please keep long code snippets to the thread to keep the main channel readable. Thank you.

[Divyansh Kushwaha]

@Composable
fun Content() {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(
            space = 16.dp,
            alignment = <http://Alignment.Top|Alignment.Top>
        ),
        contentPadding = PaddingValues(8.dp),
        reverseLayout = true
    ) {
        items(50) {
            TextMessage(text = text)
        }
    }
}

@Composable
fun TextMessage(
    modifier: Modifier = Modifier,
    text: String,
    minimizedMaxLines: Int = 3
) {
    if (text.isNotEmpty()) {
        var expanded by remember { mutableStateOf(false) }
        Box(
            modifier = modifier
                .shadow(2.dp, RoundedCornerShape(8.dp))
                .clip(RoundedCornerShape(8.dp))
                .background(Color(0xFFCDFFF8))
                .padding(8.dp),
        ) {
            Row(
                modifier = Modifier.fillMaxSize(),
                verticalAlignment = Alignment.Bottom
            ) {
                SelectionContainer {
                    Column {
                        Text(
                            text = text,
                            maxLines = if (expanded) Int.MAX_VALUE else minimizedMaxLines,
                            overflow = TextOverflow.Ellipsis,
                            onTextLayout = { layoutResult ->
                                expanded = !layoutResult.hasVisualOverflow
                            }
                        )
                        if (!expanded) {
                            Text(
                                text = "See more",
                                modifier = Modifier.clickable {
                                    expanded = true
                                },
                                style = MaterialTheme.typography.labelSmall,
                                color = Color.Green
                            )
                        }
                    }
                }
            }
        }
    }
}

[Divyansh Kushwaha]

@Zach Klippenstein (he/him) [MOD] Done! Thanks.

[Huan]

hello @Divyansh Kushwaha, did you find a solution for that? I am in the same situation :(