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

Like in title

Use the size attribute ( with a value calculated by the amount of characters added to the field.

But how to get input size from this input which is hidden with vaadin-text-field

.executeJs(“this.inputElement.setAttribute(‘size’, 1)”);

Thanks a lot, I will check it.

@quirky-zebra does that have universal browser support? Neither caniuse or mdn has support data for it.

Good question… :grimacing: looks like it’s here for literally a decade

I can’t find that info anywhere, and I don’t think I’ve ever seen size actually recommended for anything, so I’ve just assumed it doesn’t have good support. But it could also be that it’s just been surpassed by em and ch units in CSS… so the CSS-based alternative to that could be e.g.
field.getElement().executeJs("", "5em"); or "5ch", depending on whether you’re optimistic or pessimistic about your character widths :grin:

of course, you probably don’t need that exact of a width, especially considering that neither size, em, or ch will give you a width that fits exactly that number of chars always, because chars vary in width, so maybe you don’t even need to set it on the , but can instead set it on the root element, so you could just add a few chars of “padding” to that figure, and do:

I’m on your side :sweat_smile: His question was just soooo specific that this old and probably legacy Feature could shine

hah, yeah, and it was fun to be reminded of size – it can totally slipped my mind :smile:

Wait til somebody asked about border on Grid :nerd_face:


Guys I’ve tried many things and for English and Japanese is not working. This content is added to the Dialog component. The same result is for CH units:




:thinking: why don’t you use a textarea that can wrap once the text gets to long? width can’t grow infinity

Business requirements :frowning_with_open_mouth:

I’ve suggested that before.