https://kotlinlang.org
Join Slack
I’m trying to adjust the `TextField` size so it’s adjusting to the size of the text that’s currently...
# compose
z
I’m trying to adjust the 
TextField
size so it’s adjusting to the size of the text that’s currently set. I thought that 
wrapContentSize()
would do the job but I couldn’t be more wrong 😬 So having this:
Copy code
TextField(
        modifier = Modifier.wrapContentSize(),
        textStyle = TextStyle(textAlign = TextAlign.End),
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
Gave me such result in preview 👇 which arises 2 questions: 1. Why 
TextAlign.End
set it around 40% of the width and what is the empty space behind it? 2. Why 
Modifier.wrapContentSize()
doesn’t wrap it around the value or label at least? 🤔
s
The padding is a known issue which is recently fixed but probably not a part of beta4
I didnt understand the wrap completely, but material text field has a default min width in dp
I think it was 260dp or something like that
z
As for the wrap, I’m trying to get something like this:
260dp seems a lot for min width 😅. So is there any way to calculate the width based on the content? I also tried with:
Copy code
Modifier.defaultMinSize(minWidth = 0.dp).wrapContentSize()
but no luck 😕
s
280.dp
calculating based on content:
it is hard to define content there
TextField has error messages, label (and some more that I do not know)
@Anastasia [G] for more details but maybe what you need is to use BasicTextField?
s
Yea, if you're trying to build a design that's different than the stock Material, it's better to start from BasicTextField
👍 1
z
That makes sense! Thank you for detailed answers 🙏, will try with BasicTextField
a
About TextField sizing, we set minimum width 280 dp which is overridable. If you tell us that minimum width is anything more than 0, then we use it and don’t apply 280 dp. So you should be able to achieve your behaviour if you do 
sizeIn(minWidth = 5.dp)
. If it doesn’t work this way, then it is a bug.
@Siyamed Can we wrap the content with the BasicTextField though? Don’t we always require 10 characters minimum width?
Looks like 
BasicTextField("a", {}, Modifier.background(Color.LightGray))
will appear wider than ‘a’ character which is probably not what we want
z
@Anastasia [G] So I did some digging and in the 
TextFieldDelegate.kt
there is:
Copy code
internal const val DefaultWidthCharCount = 10 // min width for TextField is 10 chars long
In my case it looks more like 12 chars (but maybe depends on the font). So, does it work as expected or maybe I should raise it as a bug somewhere? I was able to achieve it with the old fashioned style 
EditText
(like in my screenshots here) so I hope it’s not gonna be Compose TextField limitation 😅
s
12 chara vs 10 chars --> H vs i Depends on which chars you use
I am not sure what limitation is
If you set it to wrap content, will you provide a min width? Because otherwise it wouldn't be visible
As far as i remember the min 10 char is applied when there is no other data.
You can calculate a char length, set the length to a char, and when there are 2 chars, recalculate and set the width again
z
I tried to provide 
minWidth
, set it to 
wrapContent
, etc but it never can wrap around 1 or 2 char, it’s always wider
s
A ticket/bug sounds good which will let us investigate and discuss further.
Did you try what Anastasia mentioned? SizeIn()?
(actually maybe size in is not what you look for i am not sure).
z
calculate a char length
Would probably work as if I specify exact width it’s the view is adjusting it’s size correctly
s
If you can share the images, use case,the expectation and what you tried in the ticket i would appreciate
What i wonder is though, do you want the TextField to be 0 width when user deletes rhe characters?
z
@Siyamed 
SizeIn()
doesn’t work as it keeps the min width = 10 char
👍 1
s
Ticket :) 🤷
✔️ 1
z
So for now the only way I could see it working is to calculate how many 
dp
would take my string and apply it to the width directly 🙂 (will try to check it tomorrow actually)
Just for the reference, ticket was already created, just updated it a little. https://issuetracker.google.com/issues/178945145
4 Views
Open in Slack
PreviousNext
Powered by

kotlinlang

A modern programming language that makes developers happier.

Powered by