Is anyone having issues vertically aligning the text in a BTF2 decorator? It's almost like the curso...

# compose

[brandonmcansh]

Is anyone having issues vertically aligning the text in a BTF2 decorator? It's almost like the cursor is being clipped and there is a small amount of padding below the 5

[Halil Ozercan]

Hi Brandon. Can you share the decorator code you are using? Are you also experiencing the same issue with BTF1? If not, can you share a screenshot of BTF1 with the same decoration and style?

[brandonmcansh]

yeah same issue in BTF1 and only in this app which is boggling.

[brandonmcansh]

val backgroundColor by colors.backgroundColor(enabled = enabled)
    val textColor by colors.textColor(enabled = enabled)
    val placeholderColor by colors.placeholderColor(enabled = enabled)
    BasicTextField2(
        modifier = modifier
            .background(backgroundColor, shape),
        enabled = enabled,
        readOnly = readOnly,
        state = state,
        cursorBrush = SolidColor(colors.cursorColor(isError = false).value),
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
        textStyle = style.copy(color = textColor),
        lineLimits = TextFieldLineLimits.SingleLine,
        decorator = {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.CenterStart) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.staticGrid.x2)
                ) {
                    leadingIcon?.invoke()
                    Box(
                        modifier = Modifier
                            .weight(1f)
                            .padding(horizontal = CodeTheme.dimens.staticGrid.x2)
                            .height(IntrinsicSize.Max),
                        contentAlignment = Alignment.CenterStart
                    ) {
                        it()
                        if (state.text.isEmpty() && placeholder.isNotEmpty()) {
                            Text(
                                modifier = Modifier
                                    .matchParentSize(),
                                text = placeholder,
                                style = CodeTheme.typography.subtitle1,
                                maxLines = 1,
                                color = placeholderColor,
                            )
                        }
                    }
                    trailingIcon?.invoke()
                }
            }
        },
        scrollState = scrollState
    )

[Halil Ozercan]

That's what I expected because we haven't changed the rendering logic between BTF2 and BTF1. This also doesn't look like a decorator issue. Text and cursor are drawn inside the inner text field.

[brandonmcansh]

usage currently :

TextInput(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(CodeTheme.dimens.grid.x12)
                        .border(1.dp, Color.White, CodeTheme.shapes.extraSmall),
                    maxLines = 1,
                    state = rememberTextFieldState()
                )

[brandonmcansh]

This also doesn't look like a decorator issue. Text and cursor are drawn inside the inner text field.

Yeah thats what I was figuring as well

[brandonmcansh]

slimmed down example:

BasicTextField2(
        modifier = Modifier
            .background(backgroundColor, shape).then(modifier),
        enabled = enabled,
        readOnly = readOnly,
        state = state,
        cursorBrush = SolidColor(colors.cursorColor(isError = false).value),
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
        textStyle = style.copy(color = textColor),
        lineLimits = TextFieldLineLimits.SingleLine,
        scrollState = scrollState
    )

TextInput(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(10.dp),
                    shape = CodeTheme.shapes.extraSmall,
                    maxLines = 1,
                    state = rememberTextFieldState()
                )

[brandonmcansh]

interestingly the BTF{1/2} height changes as well

Screen Recording 2024-01-30 at 12.40.52 PM.mov

[Halil Ozercan]

Compose TextFields start with a default height/width that accommodates an invisible text 'HHHHHHHHHH'. Then it updates again if the laid out text happens to be smaller or larger. In this scenario I guess the numbers are shorter in the font you are using. Can you try typing an uppercase letter H on an empty TextField and see if the height changes?

[brandonmcansh]

shrinks a little bit

[brandonmcansh]

in BTF1

[brandonmcansh]

ok its textStyle related it seems

[brandonmcansh]

without passing in our ts it renders as expected

[brandonmcansh]

hm

[brandonmcansh]

wondering if it's the line heights that were setup in our Typography

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

Are you using a custom font?

[brandonmcansh]

ya its Avenir

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

One potential issue is that the font metrics might be off

[brandonmcansh]

medium weight works fine; its semibold (the demi font otf)

[brandonmcansh]

yeah thats what im thinking

[brandonmcansh]

is there docs on dev.android on how to adjust the ascender and such?

[brandonmcansh]

i see this - https://developer.android.com/jetpack/compose/text/fonts#variable-fonts just not sure if there is others

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

i don’t think there’s a way to do that in-app – you’d have to check/fix the font file

[brandonmcansh]

ah

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

a way to fix that app-side might be a good feature request though…

[brandonmcansh]

Yeah was able to swap out Demi with a different otf and it fixed the issue. Just need to check the license on this otf

[brandonmcansh]

Spent wayyyyy too much time on this collectively 🥲