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

# compose

[KotlinLeaner]

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

[KotlinLeaner]

@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
                )
            }
        }
    }
}

[KotlinLeaner]

My bottom view Row looks like this in bigger device

[KotlinLeaner]

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

[KotlinLeaner]

How to solve this problem?

[Christian Kula]

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

[KotlinLeaner]

Sorry what do you mean by inverting?

[Christian Kula]

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

[KotlinLeaner]

yes but no luck. Same issue still..

[Kevin Worth]

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

[KotlinLeaner]

The last one only

[Kevin Worth]

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

[Kevin Worth]

And is it scrollable?

[KotlinLeaner]

no it's not scrollable

[KotlinLeaner]

I rewrite the code

Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)            .verticalScroll(verticalScroll),
    ) {

[KotlinLeaner]

but still same issue

[Kevin Worth]

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

[KotlinLeaner]

sure, I'll add in here

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

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

[Kevin Worth]

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

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

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