Textarea not scrollable

[ashconnell]

Tested on a bunch of android devices (Nexus 5: 4.4, Galaxy S4: 4.3, Galaxy S3) and iOS devices (iPhone4S: iOS6, iPhone5: iOS7.1) and the textarea is not scrollable when the content is larger than the textarea size.

Also of note, the keyboard-open class is not added to body element like inputs are.

Version: Beta3

I'm using basic recommended html

<div class="list">
    <div class="item item-input">
        <textarea></textarea>
    </div>
</div>

For others who also might need a quick fix, I am going to throw in an autogrow script.

[ashconnell]

I tried a bunch of autogrow scripts, including building one of my own. None of which play nicely with ionic and the way it handles taps and keyboard etc.

[mkuklis]

I'm running into the same issue right now. One of my views is a big form and scrolling is currently impossible. This is happening on v1.0.0-beta.3-nightly-1978 and Android 4.4.2

[tlancina]

Taking a look at this right now

[mkuklis]

wow that was fast response. Thank you @tlancina I'm working on project which has to be finalized by May 15th and this one worries me a bit. So thank you for looking into it.

[mkuklis]

Just to add here couple more details about it. If I place my finger on the Textarea and move my finger very slowly the scrolling works as expected but if I move it quickly in order to scroll to the bottom of the screen then scrolling fails (sorry if this is not a good description). I've noticed the same behavior with other form input fields.

[tlancina]

So we know why it's happening, just talking with @adamdbradley on addressing this specific scenario, stay tuned!

[mkuklis]

great thank you @tlancina

[tlancina]

So it looks to me like it's actually a css issue, @mkuklis if you need a quick fix try removing overflow: hidden from .item-input in your css for now.

[mkuklis]

@tlancina thanks will give it a try.

[ashconnell]

Thanks @tlancina This fixed it for iOS only. Android is still undraggable

[ashconnell]

Okay this isn't the fix, but a step closer to one. I managed to fix it by making a textarea directive to stop touchstart touchmove touchend events bubbling up to ionic's document tap handler. This allows you to scroll the textarea BUT doesn't allow you to scroll the ion-content (obviously, since events are caught before it bubbles up that far)

Here is my test code:

app.directive('textarea', function(){
    return {
        restrict: 'E',
        scope: {
            'noIonic': '='
        },
        link: function(scope, element, attr){
            if(scope.noIonic){
                element.bind('touchend  touchmove touchstart', function(e){
                    e.stopPropagation();
                });    
            } 
        }
    }
});

This might be good enough for some people who need a fix immediately

[ashconnell]

Another fix that might work better is to disable these events when focused, and re-enable them on blur. This would mean scrolling the textarea will work when you have focus/keyboard-up, and scroll the ion-content when it is not.

[perrygovier]

As @Phoey noted in #1600, this can create a problem for very large text areas.

[perrygovier]

Gonna reopen this as a regression

[joemcelroy]

Any update to this @perrygovier ?

[toby-m]

Has that commit made it into master?

[perrygovier]

It has, Closing it as tim's commit says this closed the issue. Let me know if you're still seeing it.

[jpsmith1981]

My text area is still not scrollable when keyboard is open. Also when I press in the text field the cursor always returns to the top or bottom impossible to move the cursor to a desired spot.

I tried updating to Ionic, v1.0.0-beta.13. I have a very large text area with in a slide though not sure if that would be a problem:

<ion-slide class="post-slide">
       <journalheader entry="entry"></journalheader>
       <ion-content padding="true" class="has-header">
              <form>
                     <textarea ng-model="post.content" ng-keyup="save()"> Content </textarea><br/>
             </form>
       </ion-content>
       <journalfooter class="hide-on-keyboard-open"></journalfooter>           
</ion-slide>

[edolix]

Hy,

Any update to this?? I have the same issue with Ionic beta 13.

Thanks

[YZSheng]

Hi guys,

I've got the same issue - when my textarea is focused, I can't scroll the whole page by touching inside the textarea. I saw the issue was resolved in #2374 but I can't seem to resolve it by using the directive there.

I've tried to update ionic bundle to beta 14 but the issue is still there.

I've been testing on HTC One.

Any fix?

Thanks a lot.

[mikeacook]

I'm hitting the same issue on Ionic Beta 14, any update on this? @perrygovier

[karna41317]

Same here :( , when focused can't scroll.

[clickonchris]

The original problem is fixed, but the fix has introduced a new problem. I'm having the same problem that the last commenters report, which is that once they textarea has focus and the keyboard is open, if you try to scroll the page by touching the textarea and swiping up or down, the page does not scroll.

confirmed in beta14, and also 1.0rc1. IOS & Android.

[hasandogu]

Having the exact same issue. Can't scroll the page when the textarea has focus. It is especially difficult [read impossible] with an autogrowing text area and when it gets larger than the visible content.

[numerized]

I'm having the same issue, I'm using angular-elastic.

For me the temporary fix is to revert manually these changes 5f2fdfd at least concerning the keyboard.js and scrollview.js. Then my entire view is scrollable even if the focus is on the textarea and therefore the keyboard open.

The only bug now is when the magnifier is unusable in Y, it's usable only in X but at least the bug is not blocking anymore.

To solve this bug I've hacked a little bit.

I check the presence of the keyboard first and I watch for the on-hold and on-release ionic gestures.

        window.addEventListener('native.keyboardshow', keyboardShowHandler);

    function keyboardShowHandler(e){
        $scope.keyboardShow = true;
    }

    window.addEventListener('native.keyboardhide', keyboardHideHandler);

    function keyboardHideHandler(e){
        $scope.keyboardShow = false;
    }

        $scope.onHold = function (){
                if($scope.keyboardShow == true)
            $ionicScrollDelegate.freezeAllScrolls(true);
    }

     $scope.onRelease = function (){
            $ionicScrollDelegate.freezeAllScrolls(false);
    }

<textarea on-hold="onHold()" on-release="onRelease()" enter-submit="editActivity(activity.$id, activity.description)" msd-elastic ng-model="activity.description" ng-blur="editActivity(activity.$id, activity.description)"></textarea>

[danfaber]

Hi, does anyone have any advice / updates on this?
I have the same issue as recent posts - when the focus is on a text area it is not possible to scroll the entire page. I imagine this is because it thinks it should be scrolling within the text area itself - so I see that there might be no clean way around this (should it scroll the page or the text area!).
Thanks.

[msevestre]

What about using something like
https://github.com/monospaced/angular-elastic
That way the textarea automatically resizes to its content and the issue
with double scrolling disappears...

On Thu, Jul 2, 2015, 8:00 AM danfaber [email protected] wrote:

Hi, does anyone have any advice / updates on this.
I have the same issue as recent posts - when the focus is on a text area
it is not possible to scroll the entire page. I imagine this is because it
thinks it should be scrolling within the text area itself - so I see that
there might be no clean way around this (should it scroll the page or the
text area!).
Thanks.

—
Reply to this email directly or view it on GitHub
#1280 (comment).

[danfaber]

Thank you @msevestre - I've just added angular-elastic which made the text-areas better sized. The scrolling problem still remained, so I reversed scrolling within checkboxes as @numerized recommended (5f2fdfd) and all is good in the world.

[qualiabyte]

Yes, thanks @numerized and @msevestre. I also ran this issue where a large textarea becomes unscrollable when in focus. Manually reverting change 5f2fdfd (keyboard.js and scrollView.js) from ionic.bundle.js fixed the issue for me.

Also commented out the scrollChildIntoView event listener for now. It seems to scroll to the middle of the textarea (rather than the cursor position), not so useful when the text is screen-size or even larger. This is essential since I'm using angular-elastic for an auto-expanding textarea as well.

If there were a way to scroll to the text cursor position instead (maybe by tracking the last click coordinates), that might resolve some issues here and in #2901.

[ashconnell]

Yep agreed. It looks like Ionic just scrolls the center of the textarea to the center of the viewport, where-as it might work better if it scrolls to the position of the tap

[bittu1028]

I've added angular-elastic but the scrolling issue still remained. Cant scroll the view when it is focused on the text area.Any solution for that......

[mihail-petkov]

Adding overflow-scroll="true" to ion-content fixed the problem for me! :)

[msevestre]

I can confirm that adding overflow-scroll="true" and using angular-elastic just works perfectly

[ravishtiwari]

Adding overflow-scroll="true" to ion-content does not resolves the issue. I am using v1.1.0 and have following markup:

<ion-item id="titleItem" class="item-input">
  <textarea overflow-scroll="true" id="title" placeholder="Enter title"></textarea>
</ion-item>

[mklilley]

Hi,

I am using ionic 1.2.4. I also have a problem with a fixed size textarea. When it is in focus i am no longer able to scroll the view. I have inputs on the same view and I have no problem scrolling when they are in focus.

Is there any comment from the ionic team on this one?

[mica16]

Same issue, using ionic v1.1.0 (iOS device).
@ravishtiwari Please note that you set overflow-scroll="true" on the textarea itself instead the ion-content.
However, it does not works for me.
Applying native scrolling or not doesn't change anything for this issue.
It's really frustrating, since this "feature" is by far the most expected by users filling forms in my app.

Has anyone another idea ? I also tested overflow-scroll associated with angular-elastic, it doesn't work.

[judezhu]

+1. same issue here. overflow-scroll does't work for me as well.

[mklilley]

Hi.

I just upgraded to v 1.3.1 and I still have the same problem.

How best should we proceed with this?

Thanks,

Best regards,

Matt

On 26 April 2016 at 21:49, Justin Willis [email protected] wrote:

Hey all! Are you still having this issue with the latest version of ionic
1 (v1.3.0) ?

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#1280 (comment)

[omarmeky]

+1

[nadeemkhan]

+1

[anurag6792]

+1

[PhilHuot]

Adding overflow-scroll="true" to ion-content does allow scrolling while the textarea is focused (keyboard open), but when unfocused, scrolling directly on the textarea is impossible... You have to scroll on elements outside of the textarea which is hard when you have a big textarea in the page.
Someone else is experiencing this or is it just me?

[hassanajazch]

Same issue here @PhilHuot , cant scroll when try to write long text, at-least not working on Android.
overflow-scroll="true" did not fix anything.
Anyone try to fix it?

[ruairisdad]

Not a great solution, but I just added a bit of left padding to the containing element of the textarea. That way, users can grab that bit of "left border" and use that to scroll the ion-content

[felipeleivav]

I was able to fix this issue by overwriting the overflow of my textarea:

overflow:visible !important;

Now it works on browser and android (with an up to date ionic v1).

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.