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

ste

03/03/2022, 10:15 PM
Why does
BasicTextField
have a considerable larger width than the text inside it? It messes up visual alignment...
s

Siyamed

03/03/2022, 10:16 PM
Can you describe the visual alignment issue
You should be able to give the size you want (x many dp's)
c

CRamsan

03/03/2022, 10:17 PM
The BasicTextField(just like the TextField) is designed so that the user can input text. Therefore it has a min witdh.
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.
s

ste

03/03/2022, 10:20 PM
Well, isn't the min width a bit too much? When the input is short, it looks ugly
c

CRamsan

03/03/2022, 10:22 PM
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.
s

ste

03/03/2022, 10:23 PM
what if i'd like to set the min width only?
s

Siyamed

03/03/2022, 10:24 PM
@ste what is your expectation?
Or what is it that you are trying to have?
s

ste

03/03/2022, 10:33 PM
well, I'd like to display the label at the start of the edit text, and then horizontally centering the whole thing: (e.g.)
Copy code
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:
s

Siyamed

03/03/2022, 10:37 PM
Maybe add a bigger textfield (or keep the default one) and use TextAlign to center the text (but not the Textfield)
s

ste

03/03/2022, 10:39 PM
Yep, I was already centering via TextAlign, but I wanted to know if I could avoid that
s

Siyamed

03/03/2022, 10:39 PM
Or use onTextLayout callback to decide on the final width
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
With onTextLayout you can know how much space is required for text and set the size
Maybe we need an opt-in param in the future to disable min width. Please feel free to create a ticket about it.
As a user though i am not sure if i would like label moving when i am writing
s

ste

03/03/2022, 10:42 PM
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)
5 Views