TextField with textwrap (overflow)

#1

I am not able to get TextField to textwrap. I want it to go to multiple lines, but right now it just goes on and on on a single line. Is there a way to do textwrap on a TextField?

I am using NS angular.

For example:

<TextField hint="write stuff" textWrap="true"></TextField>

Does not work.

It DOES work if I use TextView instead. However, that brings up other problems–I want to have a close keyboard button on the keyboard, which requires I expose a returnPress event. I am not able to do this with TextView. So I want to use TextField, but also want to wrap the text. I have not been able to do it with CSS either yet.

#3

you can’t use textWrap with TextField.

#4

As per iOS guidelines, A TextView meant to allow multiple lines of input with new line characters (via return key), so you actually don’t dismiss the keyboard like a TextField.

But if you still want to do this, you can with some hacks.

iOS: Override the textViewShouldChangeTextInRangeReplacementText delegate method, check if replacementString is new line character, if so then dismiss the keyboard.

Android: Set max lines on the native view (EditText ) to one, so it should act like a TextField when you hit return key.

#5

Thanks for your replies. I will take a closer look. I am surprised this would be inconsistent with guidelines–not sure what could be wrong with having a “done” button on the keyboard that closes it with a multiline input.

#6

If your problem is just about having a button to the keyboard, you can use the iqkeyboardmanager plugin for iOS. For Android you can place a view at bottom of screen that should be visible only when your text view is focused.

#7

Got it. I will consider whether I need the “Done” button or if it is sufficient to use another method (such as having the keyboard disappear if the user clicks outside of the textview). If I want to use the “Done” button, looks like that plugin is the way to go.