Scroll within input text field on iOS


I am finding on iOS that text with a single line text field - i.e. a element will not scroll when overflow occurs. For example, if I type “the quick brown fox jumps over the lazy house dog” into a text field such that the text is clipped on left to show the end of the sentence, “the lazy house dog”, the standard iOS UI for auto-scrolling does not work. The standard behavior is to hold your finger down on the text until the native iOS magnifying glass cursor appears, continue to press and drag finger to the left or right to scroll the portion of the text that is out of view back into view. I am finding that when the iOS cursor is dragged to the leftmost edge of the text field, the text does not auto scroll. It’s impossible to edit the clipped head of the text (e.g. “the quick brown fox jumped over”).

How do I fix this?


Scroll within input text field on iOS devices

I have an update on this problem. I found that if added padding-left: 7px on the text input scrolling worked on iOS. The problem seems to have something to do with having adequate padding on the left/right for iOS to detect when cursor is to the left / right of text in order to initiate auto scroll. Can someone comment on this?