Hey guys, I had a question. Does anybody knows why...
# compose-desktop
a
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
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
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
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
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
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
I don't know if this is related, but I had some similar issue https://kotlinlang.slack.com/archives/C01D6HTPATV/p1616079420040300
a
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.