Ion-nav-view css class that was added in beta12 adds black bar if keyboard plugin is used

ionic-v1
1

Hello all,

Can you please point me into right direction.

I have a login page with username/pass fields and login button. Also I use Ionic’s awesome keyboard plugin to hide accessory bar of the keyboard.

So my problem is that when any of the input fields has focus, the black background color is exposed that exceeds keyboard hight (due to the hidden accessory bar).
Here is the css that was added in beta12 that causes it.

Can anyone point me in right direction on how to set it to match main content color?

.ion-nav-view{
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background-color: #000}

here are the screenshots:

Thanks a ton!

2

Well, first you should be disabling native overflow scroll to prevent the native app view from moving.

That should really cover you needs.

Question, in the first image, why is the ion-view cut in half? Is that googles emulating the keyboard?

3

@mhartington yes i ran it in Chrome devtools

5

Just double checked my code and it appears that I already disable native scrolling. But the issue is still there.

Your help is much appreciated.

6

Got it!
Changed line 363 in _scaffolding.scss
from background-color: #000;
to background-color: $base-background-color;

Not sure if you guys want to introduce this change to your master branch.

Thanks.

7

Hey sorry for not getting back to you, was away for the weekend.
Glad to see this was resolved though