How to change TextField width to fit text length, which will work with all fonts and language?

Flow
21

there is MAX limit so it should grow to this limit

22

Well then you are asking for the impossible :wink: the input field can only grow as much as the parent is wide (dialog max width)

23

Or should people scroll in the dialog?

24

Ok, thanks. :slightly_smiling_face: I will try with the text area. again.

25

It’s the better solution in the long run… otherwise you could try something with adding the text field in a Scroller but that’s not good UX

26

Yes. Text Area is better solution. :slightly_smiling_face:

27

Business requirements
Just noting here, technically too challenging business requirements should be challenged.
Yes. Text Area is better solution.
Yes, as it has a feature to grow vertically instead of horizontally.

28

so, can’t say for sure why it’s not working as expected, but one thing I can say for sure is that em units typically represent a significantly larger length than the width of the average character (based on the font-size actually). ch units would probably get you closer to the correct width. No idea how these work with japanese chars however.

29

update: I think the ic unit is better suited for japanese/chinese/korean actually

30

Could be multibyte characters aren’t accounted for there?

31

Java strings are UTF-16 though, right? So shouldn’t be an issue.

32

At least for the english screenshot above, it looks about correct for em units – it’s significantly longer, but the font-size (i.e. the distance between the ascender top to descender bottom, i.e. a bit taller than the height of an uppercase letter) is also bigger than average latin letter width, whereas ch is a closer approximation, as it’s based on the width of a 0

33

Working with CJK is science for itself… really hard for the whole “western based” technologies :x

34

yup. And its a bit difficult to say why the japanese text is longer than the field in the screenshot, as we cannot see how much longer the text is. But a few things come to mind:

  1. Those characters are quite wide, so maybe even em is not sufficient. Not sure if ch would work better, if it’s based on 0 for asian chars as well. If not, then ic should work best, but then you’ll have to change the unit depending on the language.
  2. The width of the field includes some padding, so it would be wise to add 2-3 chars to the length to cover the padding as well.
35

In the end, there is, as far as I know, no way in CSS to set the width of anything to exactly the width of its text content. Annoying js-based workarounds would be needed for that.

36

wide characters are one example of multibyte characters

37

although I’m not 100% certain if “wide” here means wide in bits, not physical width

38

if multibyte chars were the issue, .length() would return too big a number, so the field would be wider than desired, instead of shorter

39

Yeah, it’s not the bits-per-character that’s the problem, it’s the display-width-per-character

40

Like the last example here:

bb688113.png
bb688113.png558×600 35.3 KB