Textarea height on mobile Safari (iOS, iPhone, iPad, iPod touch)

[spamjim]

I'm working on a web form for display on mobile Safari that includes default text in a text area. When viewed on iOS 4.2.1 iPod touch, the text is cut off with no ability to scroll. The text is not scrollable when iOS loads the keyboard onscreen as well. The user cannot edit anything that is out of view.

Desktop Safari displays a scroll bar.

Sample screenshot:

http://www.mediafire.com/i/?4ccvxta505bb3dw

Is there a trick that I am missing? Do I just need to define a generous height and hope that the user does not exceed a limit of characters?

 

[spamjim]

UPDATE:
It turns out that one can scroll in the textarea. One must use 2 fingers to scroll a textarea on mobile Safari. But this is still a problem for me as my users may not realize that there is text hidden outside of view. That seems like lousy design for iOS.

Any ideas are still appreciated.

textarea { width:290px; height: 70px; }
...
<textarea>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
</textarea>

 

[vacunita]

Sadly, unless you have a direct line to the iOS designers, there's not much to be done. Most iphone/Mac users should be familiar with the two finger scroll because the track pads use it a lot for many of the laptops, and desktops. And the iphone uses an extension of that.

besides its not like other devices offer easier method of scrolling in a textarea, or scrollable div or iframe.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[spamjim]

I now understand the two fingers to scroll. My concern is simply that there is no visual cue that there is content to scroll.

I'm composing my stern letter to Steve now.

 

[vacunita]

You could add a border at the bottom, maybe an arrow to indicate there's something to scroll?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/