If you put a long textarea in an ion-content, you can't type in it or scroll it.
When would you want to put a long textarea in an ion-content? One example would be our case: we want to show image previews on top followed by an auto-growing textarea. This allows the user to see image previews that scroll off-screen when he scrolls down.
To repro:
Create a blank Ionic starter project.
In index.html, make the body the following:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
Preview images:<br>
<img src="http://img1.jurko.net/avatar_7392.jpg">
<img src="http://img1.jurko.net/avatar_9199.gif">
<img src="http://img1.jurko.net/av001.jpg"><br>
Enter a comment:<br>
<textarea style="height: 2000px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>
</ion-content>
<ion-footer-bar keyboard-attach>
</ion-footer-bar>
</ion-pane>
Run the app on an iPhone.
Scroll down a little bit.
Click the textarea, to bring up a keyboard.
// Expected: You can scroll the textarea
// Actual: You can't scroll the textarea.
// Expected: You can type in the textarea.
// Actual: When you type, nothing seems to happen. What is happening is that you can't see what you are typing because the cursor is actually at the top of the textarea.
// Expected: Clicking the textarea puts the cursor where you click.
// Actual: Clicking the textarea does not move the cursor there.
// Expected: Typing does not put the cursor under the ion-footer.
// Actual: If you type long enough to bring the cursor into view, and continue typing until the cursor is at the end of the viewable portion of the textarea, the cursor disappears behind the ion-footer.
mhartington
commented
9 years ago
Type: bug
Platform: ios 7 webview
If you put a long textarea in an ion-content, you can't type in it or scroll it.
When would you want to put a long textarea in an ion-content? One example would be our case: we want to show image previews on top followed by an auto-growing textarea. This allows the user to see image previews that scroll off-screen when he scrolls down.
To repro:
// Expected: You can scroll the textarea // Actual: You can't scroll the textarea.
// Expected: You can type in the textarea. // Actual: When you type, nothing seems to happen. What is happening is that you can't see what you are typing because the cursor is actually at the top of the textarea.
// Expected: Clicking the textarea puts the cursor where you click. // Actual: Clicking the textarea does not move the cursor there.
// Expected: Typing does not put the cursor under the ion-footer. // Actual: If you type long enough to bring the cursor into view, and continue typing until the cursor is at the end of the viewable portion of the textarea, the cursor disappears behind the ion-footer.