Single line input text wrap issue

Mobile Beta
1

Single line input wrap and look so ugly. anyone know how to fix this?

IMG_9807
IMG_98071140×254 40.2 KB

2

You have two options:

  1. Keep the text on a single line and hide anything that extends beyond the horizontal limit of your input, or

  2. Allow the text to wrap onto multiple lines and let your input grow vertically to accommodate those lines.

Which do you prefer?

3

thnaks! trying to do option 1 on native mobile.

4

Click on your text element and set the vertical height to a fixed value. I usually use 25px, but this also depends on your font size. Ideally, choose a height that accommodates only the height of the first line of text

5

thanks!!! This works but doesn’t make sense.

It does the ugly wrapping at a fixed height of 44px, but not at 43px with font Inter 18 weight 400…why?

The goal is to make it as large as possible without the ugly wrapping. this makes it easier for users to tap. I wanted 56px but that’s not possible i guess.

hmm
hmm720×1316 66.4 KB

1
1716×468 18.6 KB

6

maybe this is the better option.

i can get it to wrap on multiple lines - but it wont grow the size of the single line input. how do you get the input to grow?

7

Take a look here:

Editor here

8

ah!! yes - this works perfectly….but it’s in web. not native mobile.

9

Sorry :melting_face:
You can’t reproduce it in native mobile?
I don’t have any project in native mobile, sorry for the misunderstood.

10

still very helpful!!! thnks

1 Like