Textarea and input display problems

ionic-v1
1

Hi,

I’m having a strange behaviour when I tap in a textarea, it’s duplicating when the keyboard appears. Here are some screens to be more explicit.
Normal page
Then I tap on the textarea, strange behaviour
And if I tap on the textarea (upper one), everything goes back to normal.

And there’s nothing special in my code

<ion-view title="<img src='img/{{iconType}}' class='nav-title-icon' />Commentaire">
<ion-nav-buttons side="right" ng-controller="SendCtrl">
	<div ng-click="sendReport()"><img src="img/envoyer.svg" /></div>
</ion-nav-buttons>
<ion-content class="comment-page" id="comment-incident">
	<textarea name="comment" id="comment-textarea" 
			ng-model="incident.comment">
	</textarea>
	<!--
	Button area not used for now
	<div id="comment-buttons">
		<div id="comment-plus-button"></div>
		<div id="comment-ok-button"></div>
	</div>-->
</ion-content>

Also, when an input has focus and I try to scroll, it duplicates one of them and it comes back to normal when I stop scrolling.

Finally, I have a problem with input borders. They are 1px solid white but they aren’t displaying evenly : screenshot
On some pages, it’s ok though. And it’s only happening on phones (not in chrome).

So if anyone ever encountered this before, any help is appreciated !
Thanks a lot for your time.

2

Concerning the textarea, I took your sample code and ran on a local device. I didn’t find run into the problem you are having. I had to style it myself to get as close to possible to your view.

To be much more help, we’ll probably need :

  • Android Device?
  • Android Release?
  • A more complete sample to test locally. Can you make a CodePen?
3

I made a [Codepen][1] including the css. I hope this will be enough to test it.

While making it, I noticed that this issue only happens if the textarea is bigger than the view resized (when keyboard opens). If I put a height of 100px for example, it’s ok but not with 500px.

I’m testing my app using a Samsung Galaxy S2 with Android 4.4 and a Galaxy S with Android 4.2.2.
Ionic 1.0 beta 4.

Thank you
[1]: http://codepen.io/akyh/pen/hAGaD

4

I also found some display problems about textarea and input.

You can test it here: http://codepen.io/anon/pen/rvDij

If you input a very long line text in the textarea, you will see that the whole textarea item moves to the left and “textarea label” goes out of the left border.

Although the same effect does not take place on the input in my desktop browser, but it happens in my app.

1 Like
5

@zwz Have you considered using a stacked label for your text area?

<label class="item item-input item-stacked-label">
	<span class="input-label">textarea label</span>

	<textarea placeholder="yyy" rows="8" cols="10">
	</textarea>
</label>

Maybe you shouldn’t HAVE to do this. Might want to open an issue on GitHub for that.

5 Likes
6

I’ve tried recreating this problem with my local device and Geny Motion emulation. Unfortunately, I can’t get it to re-occur.

We never discussed which Ionic version you are using. Beta ? . Can you try using the nightlies?

Anyone else have ideas?

7

@Calendee Thank you.
Yes, it is a good point to use item-stacked-label for a textarea.
After applied it, however, the textarea label is not aligned well with the input label.

8

I just tried it on nightly (May 14).
The issue is still there…

9

I think you probably need to open an issue. As I can’t reproduce with my device, the problem is a bit over my head.

10

I am currently having the same issue. What I have found is that it adds an additional:

<textarea class="cloned-text-input" readonly=""></textarea>

to the page. I tracked it down to cloneFocusedInput function in the ionic bundle. Simply removing this function solved the issue, however that does not seem to be the right way to go considering I guess it is there for a reason :slight_smile:

11

@maximel Hi, I got the same problem on my device when an input has focus and I try to scroll.

And I opened the issue. Hope they can fix it soon.

12

Thank you for your replies (everyone). I didn’t have much time this week to reproduce it outside my project.

I’m currently using v1.0 beta 4. I’m going to try the nightlies and also make a new project to reproduce it (or not) and report back here.

13

Thanks for reporting this. The cloned inputs are put in to fix some keyboard issues while scrolling (the text caret hovers over the webpage while it scrolls).

So the cloned inputs are put in, except they’re only copying the class attribute or the original element, not its id. So if you have your textarea styled with id’s then this may be the issue. For now I’d recommend styling your inputs with css classes and we’ll work to improved the functionality.

Thanks

14

Ok, this also has to do with the textarea height being pretty large, which covers up where the keyboard will end up being.

15

The issue for large textareas not removing the cloned input should be fixed in nightly.

16

Is this issue has fixed as i am getting same problem with my text area and content editable div while typing its very difficult to change input caret position on taping with textarea and mainly for Div .scrolling also problem…

i need to provide functionality to add or edit multi line text in my app.

i am using ionic beta 13 and Android s4 4.2

Till now its a only issue i am facing very difficult to fix.

2 Likes
17

any news there? the same is happening at my side too

18

I also faced the issue. I believe, it is very fundamental problem. It must be fixed with higher priority.
Till now, I cannot build an app with text area.

19

This appears to still be an issue even with Magnesium Mongoose.

20

I am also seeing the focused cloned inputs on scroll.

Ionic 1.0.0-beta.14 and iOS8 (I have not tested other Ionic versions or OS’s.) Here’s a recorded screen grab that demonstrates the bug.

1 Like