Perspective: How to create vertically centered Text Area components?


I want to create a Text Area that is vertically-aligned to be centered. This is possible in Labels by setting the alignVertical property to “center.” Does a similar solution like this exist for Text Areas? Text Fields are vertically centered by default. I am basically wanting to create a Text Field that recognizes that it has run out of space and will break to a new line. Text Fields do not do this, Text Areas do.

If not, does someone have a suggestion as to how to script this?


No, there’s no way to give a new line to a text field.
If you don’t want to have a input area just use a markdown component.

That’s not what the question was. The user wants to vertically center the text of the input field.

No, there is no way to vertically-align the text field or text area. Even the Label was actually a bit of tricksy magic: If you examine the Label in a browser session you’ll see that it’s actually wrapped in a sort of column-oriented flex layout and when you specify a vertical position we’re just applying flex layout positions like “flex-start”, “center”, and “flex-end”, where “flex-end” is the default which makes it appear the label’s text is at the “bottom”. The input components do not have the same sort of wrapper.

Thanks for the reply. Do you think that is a feature that you guys plan to add anytime soon? Aesthetically it would be awesome to have that capability.

In the mean time, I suppose a similar wrapper of some sort could be created as you guys did with the Label component, on a Text Area component. Just trying to brainstorm that out, do you think it would be possible to make a “homemade” version of this wrapper you guys made for the Label?

Not to my knowledge, no.

Not with the same effect, because any homemade wrapper would be moving the text field itself - not the text within the text field. The Label component only appears as if it’s being centered because there is no input field around it.

Thanks. Another question: is there a way for Text Fields to recognize that they have run out of space, and then trigger a new line, in a similar vein to Text Areas? Text Fields are vertically aligned by default in their component area, so if there was a way to make a Text Field recognize overflow that would work too.

No, Text Fields will only ever display a single line of text - that’s why there are two components; the Text Area is intended for use when you might need more than one line of text.

Maybe was a part of the question I already replied hehe.