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.