https://kotlinlang.org logo
Title
a

Ahmad Daneshvar

02/15/2022, 10:47 PM
Hey guys, I had a question. Does anybody knows why
TextField
has some sort of padding, that causes the content cut (Please look at attached image)? And how I can eliminate it? Just please consider I don’t want to decrease font size or increase the height of
TextField
or
OutlinedTextField
to match the content. I am looking for another way. I also tried
Modifier.padding
on the textField and didn’t matter. Thank you in advance.
k

Kirill Grouchnikov

02/15/2022, 11:04 PM
Did you set a hardcoded height on this text field? Material variant comes with built in vertical paddings, so reducing the overall height will cause the content to get clipped.
a

Ahmad Daneshvar

02/15/2022, 11:20 PM
Yes. I’ve set a hardcoded height. Because the default height is much and the UI isn’t impressive. When I removed the hardcoded height, the output was like the image attached ⬇️
k

Kirill Grouchnikov

02/15/2022, 11:23 PM
Material is a specific opinionated design system. If you're looking for more fine grained control, at some point you'll need to take over and create your own composeable(s).
🙏🏻 1
🙏 1
a

Ahmad Daneshvar

02/15/2022, 11:26 PM
This is disappointing. I hoped to find a standard way to do that. But it seems there is no way. Create a custom composable maybe time consuming. Anyway, Thank you for your responses. That was great help. 🙏
I found may I have to customize the
BasicTextField
to reach to the goal. The padding is because of decorations.
k

Kirill Grouchnikov

02/16/2022, 1:49 AM
One the more important goals of Compose is to make it easy to build your own components by providing the right building blocks.
👍🏻 1
👍 2
y

Yan Pujante

02/16/2022, 2:57 PM
I don't know if this is related, but I had some similar issue https://kotlinlang.slack.com/archives/C01D6HTPATV/p1616079420040300
a

Ahmad Daneshvar

02/16/2022, 3:08 PM
Thank you. Yes, It seems the same problem. I found that extra margins may reserved for decorations. Because I can not see this problem in the
BasicTextField
. I followed-up the source code of the
TextField
and I have realized that decorations, label and … need some room, and the this margin reserved for them. Also, in the Material them guidelines, it seems a standard behavior, although I don’t like it.