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

Christopher Mederos

03/21/2024, 12:18 AM
I'm using material3 and having trouble maintaining the single line format. When using a placeholder, suffix, and label - the animation of the label moving from inside to on top of the textfield briefly causes it to render as multiline. Is there a way to prevent this using some combination of modifiers / similar? thanks for the help!
Copy code
OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text(text = label) },
        suffix = { Text(text = inputSuffix) },
        placeholder = { Text(text = placeHolder) },
        modifier = Modifier.widthIn(max = 100.dp),
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
            imeAction = imeAction
        ),
        keyboardActions = keyboardActions,
    )
s

Sean Proctor

03/21/2024, 2:26 AM
Do you have a reproduction of that? It doesn't look normal. I would guess that the way the width is constrained is causing the issue. You could try setting
maxLines = 1
on the text in the label, suffix, and placeholder. if it's M3, the height is supposed to be 56 DP, so you could just set that if everything else fails.
c

Christopher Mederos

03/21/2024, 3:12 AM
ahh good call - adding maxLines to the Text composable for the label fixed it
Copy code
label = { Text(text = "Label", maxLines = 1) }
In that case, seems like the singleLine parameter in the OutlinedTextField composable only applies to the value itself (not the label, suffix, etc.)
s

Sean Proctor

03/21/2024, 1:07 PM
There's no composition local for
maxLines
. You need to set that in the
Text
. It's weird that the width of the label is shorter during animation than at the start or end. It might be a bug.
👍 1
c

Christopher Mederos

03/21/2024, 11:47 PM
it's weird that the width of the label is shorter during animation
yea... I think it happens because the suffix inside the textfield takes up some of the width (whereas when the label is on the outline, it can take the full width)
2 Views