Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login
Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Tek-Tips LinkedIn® Group

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site
Partner Button
(Download This Button Today!)

Feedback

"...I have been a grateful member of this site for several years. I love this site and refer everyone to it!..."
More...

Geography

Where in the world do Tek-Tips members come from?
Click Here To Find Out!

Tek-Tips Shirts!

Get Tek-Tips Swag
Get your
Tek-Tips Forums
SWAG here!
Home > Forums > Programmers > Web Development > HTML, XHTML & CSS Forum

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

thread215-1658440
Read More Threads Like This One
spamjim (Instructor)
19 Aug 11 16:42
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 (Instructor)
19 Aug 11 17:02
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.

CODE

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 (Programmer)
19 Aug 11 17:10
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 (Instructor)
19 Aug 11 17:22
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.  bigsmile
vacunita (Programmer)
19 Aug 11 17:25
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/
 
Read More Threads Like This One

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Back To HTML, XHTML & CSS

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close