[solved] Textarea is not clickable and not scrollable

ionic-v1
1

beta.6

Cannot click on text to select cursor position.
Cannot scroll the text in the text area.

2

Try focusing on the text area first. I’ve noticed this too and you are able to scroll once it receives focus.

3

As far as I understand Textarea already has focus, I can type into

See screencast demonstrate the problem

Not working on Chrome 35 and 37, Android Emulator, Android device

Click/Tap on the middle of the text does not move the cursor to that position, cursor stay at the end or start of the text

(Sometimes it does work, most of the time not, on device never work)

4

In case someone hit this thread, Seem it work fine when adding overflow-scroll=“true” to ion-content

1 Like
5

It’s actually not because of the scroll, but because user-select is disabled.

Use this css and it should work for you.

.item input,
textarea {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}
6

No, this does not work to allow selection of text in the text area

7

On a device I should. I’ve tested it myself and it works fine.

8

I am getting the same problem with my text area as well as with my content editable Div .
even i cant scroll the div or text area.This is very critical issue till now i am facing with my app.

Up to min-height100px sometime it works but if content is more then defined 100px then nothing work after 100 px…

i try your css solution but still same issue…is it related to clone or something else as typing is not smooth.

I am using ionic beta 13 andandroid version 4.2 samesung s 4 device.

9

Hmm, it could be because of the cloned inputs. Any chance you could tryout a content-editable div?

10

Yes the problem still there with both content-editable div as well as textarea.

is it fixed or we need to do some customize at our end. As i tried below css hierarchy also but no luck nothing is working.I tested on s4 ,s5,S3.

<div class="list">      
  <label class="item item-input">
    <textarea placeholder="Comments" style="min-height:100px; overflow:scroll;resize:none; position:relative;  -moz-user-select: text !important; -webkit-user-select: text !important;-ms-user-select: text !important; ">
    </textarea>

    <div  ng-bind-html="Comments"  contenteditable="true" style="min-height:100px;overflow:scroll;resize:none; position:relative;-moz-user-select: text !important;-webkit-user-select: text !important;-ms-user-select: text !important; ">
    </div>
  </label>
</div>
11

Ahh samsung…

Alright so samsung does some stuff to the webview on their devices that makes them a big pain. Hmm, let me take this sample and see whats going on. Let me get back to you.

12

Hi
Is There any Update on this??
I opened this thread on mobile browser chrome and the scrollbar did not show up.Works fine on desktop …

Any idea why this is happening???

thanks
Siddhant

13

The solution of adding overflow-scroll="true" to ion-content worked for me (iOS). Without it I am not able to move the cursor by tapping. The suggestion with moz-user-select […] had no effect.

1 Like
14

I had the same issue. Was working on Chrome emulator, or iphone Device Simulator. But not on the real device.

CSS solution,
textarea {
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
}
Worked for me. Thanks!

1 Like
15

this solution resolve from me. Thanks!!!