https://kotlinlang.org logo
#compose
Title
# compose
k

KotlinLeaner

09/29/2023, 12:04 PM
Hi guys, I have a problem regarding the view in smaller device. The text inside
Row
is getting cut. Code in 🧵
Copy code
@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
                )
            }
        }
    }
}
My bottom view
Row
looks like this in bigger device
But when I tried for smaller device my
Row
view looks like this
How to solve this problem?
c

Christian Kula

09/29/2023, 12:15 PM
Have you tried inverting
.padding(16.dp)
and
.fillMaxSize()
on your root Column ?
k

KotlinLeaner

09/29/2023, 12:15 PM
Sorry what do you mean by inverting?
c

Christian Kula

09/29/2023, 12:16 PM
Putting first
.fillMaxSize()
and then
.padding(16.dp)
k

KotlinLeaner

09/29/2023, 12:18 PM
yes but no luck. Same issue still..
k

Kevin Worth

09/29/2023, 12:37 PM
Is it each row that gets cut off, or just the final one?
k

KotlinLeaner

09/29/2023, 12:37 PM
The last one only
k

Kevin Worth

09/29/2023, 12:39 PM
I wonder if your parent container might have the same problem @Christian Kula mentioned, with the modifiers in the wrong order…
And is it scrollable?
k

KotlinLeaner

09/29/2023, 1:25 PM
no it's not scrollable
I rewrite the code
Copy code
Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)            .verticalScroll(verticalScroll),
    ) {
but still same issue
k

Kevin Worth

09/29/2023, 1:29 PM
Seeing more of your code might make it easier for people to help
k

KotlinLeaner

09/29/2023, 1:30 PM
sure, I'll add in here
z

Zach Klippenstein (he/him) [MOD]

10/02/2023, 6:30 PM
You can control Text’s overflow behavior with the
overflow: TextOverflow
parameter.
k

Kevin Worth

10/02/2023, 8:43 PM
(gotta love the answer coming from Zach with the sound “clip” in his name 🤣 )
z

Zach Klippenstein (he/him) [MOD]

10/02/2023, 9:01 PM
That’s me, Zach “text-clippin’” Stein