3

I have a TextField with a fixed height. When the user enters a longer text it will scroll. It will cut off any text within the padding when scrolling:

enter image description here

Basically something like this:

var text by remember { mutableStateOf("") }
TextField(
    value = text,
    onValueChange = { value -> text = value },
    modifier = modifier
        .fillMaxWidth()
        .height(100.dp),
    colors = TextFieldDefaults.textFieldColors(
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        backgroundColor = Color.Transparent
    )
)

It is possible to adjust/remove the padding for a TextField, by using BasicTextField directly, e.g. see this stack overflow question.

However I want to keep the padding, but without the clipping of the text when the user scrolls. A simple Text Composable has this behavior.

dipdipdip
  • 2,326
  • 1
  • 21
  • 31
  • It is not clear what you are trying to achieve. The text is not cut, it is just the scrolling behaviour. – Gabriele Mariotti Aug 12 '22 at 17:25
  • Compare the Scrolling behavior to the one from a simple `Text`: - `Text` will let you scroll to the edge of the Composable (including padding) - `TextField` will always show the padding even when scrolled – dipdipdip Aug 17 '22 at 07:35

2 Answers2

-1

You can use BasicTextField and modify its decorationBox parameter. Simply put innerTextField() inside a scrollable Column and add Spacers at the top and the bottom of it.

var text by remember {
        mutableStateOf("Hello Stackoverflow")
    }
    val paddingSize = remember { 16.dp }

    BasicTextField(
        modifier = Modifier
            .height(100.dp),
        value = text,
        onValueChange = { text = it },
        decorationBox = { innerTextField ->
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .verticalScroll(state = rememberScrollState())
            ) {
                Spacer(modifier = Modifier.height(paddingSize))
                innerTextField()
                Spacer(modifier = Modifier.height(paddingSize))
            }

        }
    )
Mohammad
  • 1
  • 1
  • Using a column gives other weird behaviors. For example if you open the keyboard it won't scroll properly to the cursor position. – dipdipdip Aug 18 '22 at 14:21
-1

Just use the maxLines parameter of the TextField to avoid clipping. Set it to 1 or 2, per your case, then adjust the height/font-size so the max lines you specify are accomodated correctly. It will likely start to snap to the visible portion, cutting the extra stuff entirely.

Richard Onslow Roper
  • 5,477
  • 2
  • 11
  • 42