Background Image resized on keyboard show

Ionic Framework ionic-v3
1

Hi,

I have exact same issue as this one: Background Image resized when keyboard is shown only with ionic 2. Anyone have any idea how could I solve this? I run out of ideas :slight_smile:

Thanks

2

the views and ion-content containers get smaller if the keyboard is open.

so you have to attach the background image to a fixed container. Maybe directly the body?

3

Thanks but that doesn’t work. If I set background image on body it is not visible because ion-content have background, if I set transparent background on ion-content then I can see screens shown before current screen.

4

ah, right. i forgot this :confounded:

5

I noticed that image is not resizing if application is run in full screen, but I want my status bar to be visible :slight_smile:

6

Anyone else any other ideas?

7

@sava999 Did you find a solution?

8

No I didn’t find any solution for this.

9

Follow this one

10

How does one set it directly to the body?

Thanks in advance.

11

This is how I tackled the problem, hope it’s useful to you: https://stackoverflow.com/questions/39682450/ionic2-background-image-is-resized-when-keyboard-is-open/39682451#39682451

12

Just tried this, it is not working for me.

13

{
background: white;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
background-size: 100% 100%;
background-position: center !important;
background: url("…/assets/imgs/registration_bg_v1.png");
background-repeat: no-repeat;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover; // background-position: 53% 89%;
-ms-background-size: cover;
// background-size: cover;
background-position-y: 90%;
}

set this to ion-content directly no need to view bcz in device it render as view,
this will work i have tested with android and ios too…!!!

14

Same happening on V4 any solutions?

15

Looks like Keyboard plugin resolves the issue

It works fine on IOS, where I had a small issue on Android (On Android it push the header behind the statusbar when the keyboard is shown), it got resolved by making statusbar.overlaysWebView(true) only for IOS

16

This didn’t help me at all, I installed the plugin and added

<preference name="keyboardResize" value="false" />

to config.xml but nothing helped. My background image is inserted in a div, when I put it in a ion-content it gets zoomed in and that’s another bug I tried to workaround but also zero luck with that too. If anyone knows anything about this please help me

17

Also got this issue in Ionic 4. Anyone get a solution in the end?

18

Solution here for android. Add to AndroidManifest.xml as follows:

<application
...
        <activity
...
            android:windowSoftInputMode="adjustPan">

Source: