I'm making a form screen with Compose, and I've made a text box using an OutlinedTextField
with an exact height set. The text box has supporting text that says "Optional", and if I enter too many lines in the box, the supporting text gets cut off/obscured completely. It looks like the OutlinedTextField
pushes the supporting text out of the way to make room for the value when the height is set to an exact amount. If I change the dimensions to only set a minimum height, the OutlinedTextField
will expand as more text is entered, and the supporting text will stay visible, but I don't want that.
How it looks before any text or only a small amount of text is entered:
Empty TextField
How it looks after lots of text is entered or new lines are added:
Cut off supporting text
I've also tried adding a vertical scroll to the OutlinedTextField
, but that makes it extend passed its specified height, so I don't want that either. Is there a way I can modify my OutlinedTextField
so that the supporting text is always visible when using an exact height?
Text box implementation:
var text by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
value = text,
onValueChange = {
text = it
onValueChangeAction(it)
},
label = { Text(label) },
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Sentences
),
supportingText = { Text(text = "Optional") },
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
)
The issue was reproducible in material 3 - version 1.1.0-alpha07
.
It is not reproducible anymore in the new version.
Upgrade your dependency version to this or higher,
androidx.compose.material3:material3:1.2.0-alpha02
Note, this is the current latest version and it works.
It may have been fixed in some in between versions as well.