White space above keyboard or select box control(pic inside)

ionic-v1
1

Hi, all, i have small issue with input, textarea or any control on my app page.

Ex.1 http://take.ms/dp5Tz
Ex.2 http://take.ms/kErSC

had anyone ever had this problem?

Thanks

2

Problem solved.

Thanks all

3

Do you mind post your solution? It could be helpful to others who are having this issue as well :smile:

4

I think it is not required if you will not hardcoding :smile:

5

I have this problem too. Can you please share your solution @Anheim

1 Like
6

@iolufemi, you can disable native scrolling in your run function

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.disableScroll(true);
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // Set the statusbar to use the default style, tweak this to
      // remove the status bar on iOS or change it to use white instead of dark colors.
      StatusBar.styleDefault();
    }
  });
})
7

Thanks, I will try this.
But won’t that make the Keyboard cover text inputs whenever the Keyboard appears?

8

Nope, ionic will scroll to bring the inputs up above open keyboard

9

OK. Thank you very much

10

Would be interested in what the solution was as this looks very similar to my github issue:

1 Like
11

@mhartington @andrewmcgivery I solved the issue, how ever, disabling native scrolling didn’t solve it.
What i did was to remove a background that i set on .scroll class and moved it to .pane class.
Another thing that can cause this issue is if you add the has-footer class to a view that has no footer.

Thanks for you help @mhartington

3 Likes
12

Just in-case somebody ends up here with the same problem as the OP, with the 1.0.0-rc.4 version, this problem still persists. After pulling my hair for hours, I ended up setting this:

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

instead of setting it to true.

13

I am facing exactly same issue in windows phone 8 but none of above solves the issue.
Cordova version : 5.0.0
Ionic version : 1.3.20

If i click again on textarea than this white bar hides and cursor show point to exact typing location.

image
image540×960 45.6 KB

14

Hi @Anheim, i have same problem, could you share how to fix it?
because i implemented @mhartington’s code but the white space on keyboard is still shown.

15

I’ve got the Same Issue and disabling native scrolling fixes this, but native scrolling is working way better for my app, than js scrolling. So I need it enabled.
Is there another solution?
The whitespace only appears on android.

16

This issue happens for me when I focus an input that has an auto-predict text bar on the top of the keyboard and then I tap on an input that does not have one. The auto-predict hides and leaves a whitespace. It seems ionic or the keyboard plugin does not adjust the viewport size when the keyboard changes in this way.

18

As mentioned by @trevor62590, the issue is the ionic keyboard plugin only calculates the scrollable view height for the one input field only. When you navigate to the next field, the plugin does not expand the scroll height.

My workaround is just disabling keyboard scroll

cordova.plugins.Keyboard.disableScroll(true);

That way we can keep the native scrolling and the accessory bar.

Reference: Click a input field. whole app jumps down and back to the original place

19 
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  cordova.plugins.Keyboard.disableScroll(true);
}

Using Ionic1 3.19.0, I am still seeing the black background flicker on keyboard-up. I have the above flags set as the thread says I should, and no custom CSS rules applied to .scroll. Is anyone else still seeing this?

This is just about the last bug in my app and makes it look bush-league.

20

Hi Anheim!

I’ve just solved this issue changing the input in to a ionic-input and this solved the problem without editing the scroll and other stuff.

Notice that ionic-input need also a /ionic-input at the end, unlike standard input tag.

This will help even to scroll to the input field in case it’s not at the center