Remove white blank space above keyboard


#1

I am building an app using ionic framework. I got two issues.

  1. I am getting a blank white space above keyboard.

2.White screen appears after splash screen and before app loading. I have tried the below mentioned code. But no use of it.

How to avoid the white screen before app loading and how to avoid the blank space above the keyboard transition.


#2

For number 1 - How are you setting the background image?

For number 2 - How to get rid of the white screen before app launch

Hide your splashscreen in your controller so only when your controller is loaded will the splashscreen hide.


#3

For number - 1

i added the full page background.

Here is my code… i added media quires for all devices.
.home.pane .scroll-content{
background: url(’…/img/background/home/Default@2x~iphone.png’) no-repeat center center;
background-size: 100% auto;
top: 0;
left: 0;
}

and for number 2 i am working on it. I will tell you it works or not soon.


#4

I’m not sure if this will fix it but worth a shot

.home.pane .scroll-content{
     background: url('../img/background/home/Default@2x~iphone.png');
     background-size: cover;
     background-repeat: no-repeat;
  }

I think the reason why you’re getting a white background as the scroll-content is resized to the height of the screen minus the height of the keyboard thus using an auto height doesn’t bode too well. This could be baloney but the class worked for me.

If you’re still having trouble get a codepen example up then it’d be easier to see the problem :smile:

You could use the platform specific class that’s added in the body to give a conditional CSS class e.g

.platform-ios .home.pane .scroll-content{
     background: url('../img/background/home/Default@2x~iphone.png');
     background-size: cover;
     background-repeat: no-repeat;
  }
.platform-android .home.pane .scroll-content{
     background: url('../img/background/home/Default@2x~android.png');
     background-size: cover;
     background-repeat: no-repeat;
  }

Hiding the splashscreen in the controller 100% works.

In config.xml I have the following

  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="10000" />
  <preference name="AutoHideSplashScreen " value="false" />

Then in my controller - $cordovaSplashscreen needs to be a dependacy e.g

.controller('MainCtrl',function($scope,$rootScope,$cordovaSplashscreen){
    
    $timeout(function(){
        $cordovaSplashscreen.hide();
    },1000);

});

Hope this helps :thumbsup:


#5

First issue:
I found something that the keyboard suggesting some words when you start typing for the input type text. And then when you click on the email field the “suggesting words” gets hided and there it shows the white space. And when you scroll the design gets collapse like in the screenshot.

is it clear for you? if not tell me i will upload the screenshots.

For number two. I searched for how to hide the splash screen from controller and implement some codes and my app not working now. So i installed the new app and working on it. Thanks for posting the codes. I will add that to my app and tell you the result soon.

Thanks


#6

I seen somewhere that the full background image have to add to the .pane class. So, I removed the .scroll-content from the css rule and tested, IT WORKS :smile:

.home.pane{
background: url(’…/img/background/home/Default@2x~iphone.png’);
background-size: cover;
background-repeat: no-repeat;
}