Why does `BasicTextField` have a considerable larger width than the text inside it? It messes up vis...

# compose

[ste]

Why does BasicTextField have a considerable larger width than the text inside it? It messes up visual alignment...

[Siyamed]

Can you describe the visual alignment issue

[Siyamed]

You should be able to give the size you want (x many dp's)

[CRamsan]

The BasicTextField(just like the TextField) is designed so that the user can input text. Therefore it has a min witdh.

[CRamsan]

This shows a bit better how the space works. It would not make sense for the Field to be the size of the text inside of it.

[ste]

Well, isn't the min width a bit too much? When the input is short, it looks ugly

[CRamsan]

Thats how all fields work. For example, when the input is empty, the whole field is supposed to be empty. The field should not change becasue of the text inside of it.
You can use a Modifier to set the width to what you consider correct for your use-case.

[ste]

what if i'd like to set the min width only?

[Siyamed]

@ste what is your expectation?

[Siyamed]

Or what is it that you are trying to have?

[ste]

well, I'd like to display the label at the start of the edit text, and then horizontally centering the whole thing:
(e.g.)

Row(horizontalArrangement = Arrangement.Center) {
    BasicText(text = "Label: ")
    BasicTextField(
        value = "100",
        onValueChange = {},
        modifier = Modifier
            .background(Color.Yellow)
    )
}

For short inputs (e.g. few digits numbers), this is how it looks:

[Siyamed]

Maybe add a bigger textfield (or keep the default one) and use TextAlign to center the text (but not the Textfield)

[ste]

Yep, I was already centering via TextAlign, but I wanted to know if I could avoid that

[Siyamed]

Or use onTextLayout callback to decide on the final width

[Siyamed]

The default size was a long/big discussion but we didn't want to have 0 width TextFields, and applied a rule similar to html

[Siyamed]

With onTextLayout you can know how much space is required for text and set the size

[Siyamed]

Maybe we need an opt-in param in the future to disable min width. Please feel free to create a ticket about it.

[Siyamed]

As a user though i am not sure if i would like label moving when i am writing

[ste]

Uh, I didn't try that yet! (I also tried combining a VisualTransform - to incorporate the label inside the text - and fillMaxWidth + TextAlign, but the label of course went out the screen when the input text was long)