Ionic-framework: Feature request: don't let header scroll offscreen when keyboard is shown

[dirkpostma]

It would be convenient if the header doesn't scroll out of screen in case the keyboard shows up for some input field. I know I can use keyboard plugin and use disableScroll(true) but in that case, the content doesn't scroll either. What I want is:

In case keyboard pops up,
I DO want the content to scroll up,
I DON'T want the header to go offscreen

Example usecase: chat app. In a conversation a user is chatting. In that case the user should be able to see the header, e.g. to see the name of person he chats with and to be able to go back to previous screen.

[Ionitron]

Greetings, @dirkpostma!

My sensors indicate that more information is required so that I may assist you.

• Can you provide a detailed description of this issue?
• How would a robot go about replicating this issue?
• What platform does this happen on? (iOS, Android, all, etc.)
• What platform versions does this happen on? (Android 4.2, iOS 7, all, etc.)
• Is this an issue with the Ionic Framework, or Ionic CLI?

Additionally, providing a codepen which replicates the issue is extremely helpful.

If you wish to get help using the framework itself, the recommended place is the forum.

Thank you for allowing me to assist you.

[mhartington]

@dirkpostma, please check the docs for the keyboard plugin.

https://github.com/driftyco/ionic-plugins-keyboard#keyboarddisablescroll

Or the docs on our site.
http://ionicframework.com/docs/api/page/keyboard/

Disabling scroll only disabled native-scrolling, not our js-scrolling.
With this, when you focus on a text input, our scroller will scroll the targeted input to the center of the scroll-view.

[dirkpostma]

I checked documentation and this issue is not a bug, but a feature request.

Background: I'm working on a chat application and I like to create an interface similar to Whatsapp. I'm almost there, but there is one issue left: I want BOTH the last message (in the ion-content directive) to be scrolled up, BUT I DON'T want the header to scroll up.

1) if I don't disable keyboard scroll, I focus input, the content is scrolled up (good!), but the header is also scrolled up, off screen (bad!)

2) If I disable keyboard scroll, I focus input, the content is not scrolled up (bad!), tough the header stays on screen (good)

What I would like is that the ion-header stays on screen when the ion-content is scrolled up.

So basically, I request some parameter setting like:

cordova.plugins.Keyboard.keepHeader(true);

I hope my feature request makes more sense now?

[dirkpostma]

Screenshot when keyboard is not open:

Screenshot when keyboard is open. As you can see, the header is not shown anymore.

[dirkpostma]

And a screenshot if i use disableScroll(true):

The header is there (good), but content is not scrolled up (bad)

[mhartington]

I got a demo of something like that you can do.
This should get you in the right direction.

[dirkpostma]

Thanks for your suggestion. However.. to me this solution seems very hackish and I think my feature request is a (very) general one, not just for a chat use case. I gave it some more thought, and it shouldn't even be a setting, because if there is a header, it's _always_ ugly and not user friendly if the header scrolls offscreen when the keyboard pops up, don't you think?

Edit: I studied some apps on my phone. _Every_ app doesn't let the header scroll offscreen when the keyboard pops up. So I really think this issue is a suggestion that makes ionic even better :-)

[dirkpostma]

Or may be there is a bug...

_If the content of your app (including the header) is being pushed up and out of view on input focus,_

...that is the case.

_try setting cordova.plugins.Keyboard.disableScroll(true)._

I tried that. Header stays onscreen when keyboard pops up, but

_This does not disable scrolling in the Ionic scroll view,_

When I set disableScroll(true), the ion-content didn't scroll anymore, see screenshots above.

[mhartington]

What you are talking about is making the scroll view scroll to the bottom when the keyboard is open, like how iOS messages app works. This is something that the developer should be doing. But if the scroll-view isn't scrolling at all, maybe there is a bug.

Can you please provide a codepen or plunker demo of what you have?

[MarcGodard]

I know this is old, so i will make this brief.

I use the ionic scroll and on input focus use the ionic scroll delegate to scroll to the bottom.

My issue is that this scroll is often choppy and I would like to make it smoother. Using native scroll would help a lot, however I run into the same problem as above.

I was wondering if there wasn't a way to keep the header on the top, is there a way to control the scroll speed? or the easing?

[mhartington]

There is a way to keep the header in view, use cordova.plugins.Keyboard.disableScroll in your .run function.

[Ionitron]

Greetings, @dirkpostma!

Due to the age of this issue, and possibility it may have already been fixed or no longer applicable, my sensors indicate that this issue should be closed.

If you are still experiencing this issue, please feel free to reopen and provide the following information so that I may assist you.

• Can you provide a detailed description of this issue?
• How would a robot go about replicating this issue?
• What platform does this happen on? (iOS, Android, all, etc.)
• What platform versions does this happen on? (Android 4.2, iOS 7, all, etc.)
• Is this an issue with the Ionic Framework, or Ionic CLI?

Additionally, providing a codepen which replicates the issue is extremely helpful.

If you wish to get help using the framework itself, the recommended place is the forum.

Thank you for allowing me to assist you.

[dirkpostma]

Request to reopen this issue. I tested with latest stable ionic 1.3.2 and problem still remains.

mhartington, you say: _What you are talking about is making the scroll view scroll to the bottom when the keyboard is open, like how iOS messages app works. This is something that the developer should be doing._

I am scrolling the content to bottom using $ionicScrollDelegate.scrollBottom(), but with (bad) results as shown in the screenshots above, with Keyboard.disableScroll set to both true and false. There is no way to get the desired result, namely: to see both the header and footer when keyboard is open.

Is a codepen usefull?
I could make a codepen, but I doubt whether it is usefull as the problem only exists after building to iOS or Android. The 3 screenshots above tell the exact problem:

1. Screenshot when keyboard is not open (oke)
2. Screenshot with keyboard open and disableScroll(false): when content is scrolled to bottom, the header scrolls offscreen (bad), footer is shown just above keyboard (good)
3. Screenshot with keyboard open and disableScroll(true): when content is scrolled to bottom, the header doesn't scroll offscreen (good), but footer is hidden under keyboard (bad).

Is a codepen still usefull?

Possible solution?
Reduce the height of the content div with value of the keyboard-height when keyboard is open?

[mhartington]

User disableScroll(true) in your .run and add the directive keyboard-attach to the footer.

http://ionicframework.com/docs/api/directive/keyboardAttach/

[dirkpostma]

That keyboard-attach directive (almost) does the job, thank you! :+1:

A small problem left: the content doesn't scroll. Ideally, the "content + footer" should scroll together with the keyboard when it's animating up. Now, the keyboard pops up, after the animation is finished, the footer is attached to top and the content stays on same position. Ugly animation and the bottom of the content is hidden behind the keyboard. May be the developer should somehow register a "keyboard-up" event and scroll content himself, but I think that's not how it should be.

Do you think it is possible to scrolling of footer + content together with animation of keyboard, at the same time? I let you guys decide whether or not to keep this issue open...

[eduardoGranados]

Hello, i have to agree with dirkpostma, if there is a header it should not scroll offscreen, and i don't think that disableScroll is a solution for this since some times the user needs to scroll while the keyboard is actived. I'm having the same issue.

[mica16]

I've also experienced the issue.
I want to make a Chat like Whatsapp or iOS Message.
I'm using disableScroll(true) in my run method and the keyboard-attach on footer (ion-footer-bar containing my input).
The "bad" thing is that when the keyboard appears, the bottom of the content is hidden.
On Whatsapp for instance, when you focus on the input, automatically the content scrolls down in order to see the last message.

And as evoked above, the animation of a basic scrollBottom(true), that I can trigger as soon as the keyboard opens, is not really smooth.

Is there a way to end up with a solution exactly similar to Whatsapp?

[ryanseamons]

Having spent far too much time trying to figure this one out, I'll concur that this needs to be fixed. Seems like a wide-spread mobile pattern that should be simple. I have it working on iOS, but I can't figure out android for the life of me.

[prashantpalikhe]

Can this issue be reopen this issue? Also, looking for exactly what @dirkpostma is requesting.

[mhartington]

Please provide codepen example.

[dirkpostma]

Codepen makes no sense I think, as it is a native only issue.

[mhartington]

Right, be we can make an app from a codepen.
I have a sample app put together that is a chat app
https://github.com/mhartington/Ionic-Chat
Use this if you need to.

[ciriac]

I'm running into the same issue as described by others here. If I'm using disableScroll(true), the view would no longer scroll all the way to the bottom of the last message.

Edit:
Ended up fixing (hack) by changing the bottom position of the scroll view once the keyboard is shown. Something like this...

  var viewScroll = $ionicScrollDelegate.$getByHandle('userMessageScroll');
  var scroller = document.body.querySelector('#userMessagesView .scroll-content');

  window.addEventListener('native.keyboardshow', keyboardShowHandler);
  function keyboardShowHandler(e){
    scroller.style.bottom = e.keyboardHeight + 'px';
    viewScroll.scrollBottom();
  }

[dirkpostma]

Ciriac: that seems Like a good solution! Similar to what is described here:

https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

[dirkpostma]

Only thing is that I think it should be solved natively in order to be able to get a proper animation.

[mhartington]

So if the issues is to make sure you can scroll to the bottom and not have the header scroll out of view, you can disable scrolling with the keyboard plugin, then call $ionicsScrollDelegate.scrollBottom() when you get a new message.

http://ionicframework.com/docs/api/service/$ionicScrollDelegate/#scrollBottom

[dirkpostma]

Euhm... No, that is not enough because in that case the lower part of the content is hidden behind the keyboard. See last screenshot posted here on Sep 9, 2014.

The (I think only) solution is: in case keyboard pops up, resize the content area. This should be done natively in order to get proper animation. See previous posts for more info, it is described in much detail...

[mhartington]

Again, this is something that I've demoed here in my chat example app.

https://github.com/mhartington/ionic-chat

Specifically

https://github.com/mhartington/Ionic-Chat/blob/master/www/js/app.js#L90

https://github.com/mhartington/Ionic-Chat/blob/master/www/js/app.js#L98

[goodthing]

ScrollBottom is not an option for me, as when I use scrollBottom() the keyboard closes for me!

[Tobiaswk]

I'm just leaving my feedback here.

This is still a problem! Yes cordova.plugins.Keyboard.disableScroll(true) partly solves the problem. The header stays there. I am just wondering why it can't work without disableScroll set to true?

[mhartington]

This is need to prevent the webview from scrolling when the keyboard is show.

[okonon]

@mhartington in your chat app example you are using on-focus, on-blur, on-return directives but they are not part of the repo. Where is the code for them?
https://github.com/mhartington/Ionic-Chat/blob/master/www/js/app.js#L49