-1

I'm working on an ionic3 application. Everything is great, except, when uses the keyboard in inputs or the inputs are focused the background image resizes and it makes the view horrible. I googled a lot I found the following questions in forums. Unfortunately, they didn't work for me in ionic3.

image resize in ionic. image resize in ionic And now I'm going to provide some codes. 

<ion-header>
  <ion-navbar>
    <ion-title>
      ورود به حساب
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="login">
    <div class="login-form">
      <ion-grid>
        <ion-row>
          <ion-col col-sm-12>
            <ion-list inset>
              <ion-item>
                <ion-label ionitron-bot>
                  <ion-icon name="person"></ion-icon>
                </ion-label>
                <ion-input
                  [(ngModel)]="phone"
                  type="tel"
                  placeholder="794737444"
                ></ion-input>
              </ion-item>
            </ion-list>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-sm-12></ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</ion-content>
**

Scss style codes. 

page-new-user {
    ion-content{
        height: 100%;
    }
  div.login {
    width: 100%;
    height: 100%;
    background: url("../../../assets/imgs/bg-01.jpg") no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    height: 100%;
    div.login-form {
      width: 50%;
      height: auto;
      margin: auto;
      background-color: #ddd;
    }
  }
}

And now I'm going to provide screenshots of the app.

before focus after focus

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Rajab Mohammadi
  • 35
  • 6

1 Answers1

2
 ion-content{
        height: 100%;
        .scroll-content{
            padding-bottom: 0px !important;
        }
    }
  div.login {
    width: 100%;
    height: 100%;
    background: url("../../../assets/imgs/bg-01.jpg") no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    height: 100%;
    div.login-form {
      width: 50%;
      height: auto;
      margin: auto;
      background-color: #ddd;
    }
  }

should fix this .scroll-content{padding-bottom: 0px !important;} added to ion-content stops the ion-scoll component changing its padding.

Ira Watt
  • 2,095
  • 2
  • 15
  • 24
  • on browsing work but on mobile when open the keyboard the background resize – Rajab Mohammadi May 01 '19 at 10:51
  • sorry I'll have a look and see if i can edit answer – Ira Watt May 01 '19 at 11:05
  • @RajabMohammadi `background-size: cover;` is the problem when the phone keyboard pops up the ion content changes size. because the background is set to cover it will resize. `background-size: auto;` would keep the image at its original size. Still looking to see if theres any other way round this – Ira Watt May 01 '19 at 11:53