Modal moving when keyboard showing up

ionic-v1
1

Hello guys!

I got an issue with the ionic Modal but i’m not sure if this problem is related to ionic.
When i tap on the textarea the content is moving around 20px up.

I tried already changing the viewport meta several times, with different values and no success so far. I also have KeyboardShrinksView set to true (from Phonegap config.xml).

I tried also using this [plugin][1], no luck.

I’m running out of ideas, maybe one of you solved this before.
I add a couple of screenshots to clarify the issue.

Thanks a lot!

Btw, awesome framework, is making my life much easier.
[1]: https://github.com/apache/cordova-plugins/tree/master/keyboard

2

Did you add the height attribute to your viewport? Had the same issue but with the keyboard and tabs.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
3

Yes, i have set this meta:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height" />

I read that many people solved it with that but no luck for me.

4

Odd, I’ve never used the modal before so I’m not sure. Have you done some remote debugging with safari to try and see whats being changed, as far as positioning and such.

5

This is still an issue in 0.9.25 - sometimes the modal shrinks the view and it never returns to full height if there’s a date picker used inside the modal.

6

I have the same issue. When a textarea or datepicker gets focus on the bottom half of the view and the modal automatically adjusts to show the input while the keyboard pops up, the modal never seems to reset the movement it has made when the keyboard is dismissed. To get around it I’ve turned on ‘overflow-scroll=true’ on the content tag for that view so it doesn’t use the JS for scrolling.

7

I haven’t tested this in your scenario, but would think it should fix your problem.

//If you want it to not scroll while keyboard is showing
$(‘textarea’).on(‘focus’, function(){ window.scrollTo(0,0) });

//To make sure the window goes back to where it belongs.
$(‘textarea’).on(‘blur’, function(){ window.scrollTo(0,0) });

1 Like
8

You can do this with an ng-blur as well.