A modern programming language that makes developers happier.

kotlinlang

Hi guys, I have a problem regarding the view in smaller device. The text inside `Row` is getting cut. Code in :thread:

```@Composable
fun ScreenView(verticalScroll: ScrollState = rememberScrollState()){
    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxSize()
            .verticalScroll(verticalScroll),
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f),
            verticalArrangement = <http://Arrangement.Top|Arrangement.Top>,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(painter = abc, contentDescription =null )
            Text(text = "xyz")
        }
        Column {
            Spacer(modifier = Modifier.height(16.dp))
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .background(Color.Gray)
                    .padding(vertical = 10.dp, horizontal = 20.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Image(painter = abc, contentDescription = null)
                Text(
                    text = "warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage",
                    style = SlateTypography.body2
                )
            }
        }
    }
}```


2.png

My bottom view `Row` looks like this in bigger device

1.png

But when I tried for smaller device my `Row` view looks like this

Have you tried inverting `.padding(16.dp)` and `.fillMaxSize()` on your root Column ?

Putting first `.fillMaxSize()` and then `.padding(16.dp)`

Is it each row that gets cut off, or just the final one?

I wonder if your parent container might have the same problem <@U029KFKCNSK> mentioned, with the modifiers in the wrong order…

I rewrite the code
```Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)            .verticalScroll(verticalScroll),
    ) {```

Seeing more of your code might make it easier for people to help

You can control Text’s overflow behavior with the `overflow: TextOverflow` parameter.

(gotta love the answer coming from Zach with the sound “clip” in his name :rolling_on_the_floor_laughing: )

That’s me, Zach “text-clippin’” Stein