Scroll problem when focusing on an input (Ionic)

Question

Guys, every time I test my app on my phone, and I click on the input you have, the keyboard is covering the whole screen and I can’t see what is being typed in the input, I’ve looked at my css and I saw nothing there impacting on it.

And there’s another thing, it’s not giving scroll, when the screen of the mobile phone is smaller than the others, it ends up not showing the whole screen because the scroll is not working.

the html:

<ion-header>
  <ion-navbar color="secondary">
    <ion-title >teste</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding >

  <form [formGroup]="values">
    <img width="165" height="150" src="assets/imgs/teste.jpg" alt="Logo">
    <br>
    <ion-grid>
      <br>
      <!-- ! -->
      <ion-row class="prod">
        <ion-col col-4 class="produto">
          <ion-label class="Desc_input prod-input" color="dark" stacked>Produto:</ion-label>
          <br><br><br><br>
        </ion-col>

        <!-- ! -->
        <ion-col col-8>
          <ion-input formControlName="produto" class="input_peso" name="produto" type="text"></ion-input>
        </ion-col>
      </ion-row>
      <!-- ! -->
      <ion-row>
        <ion-col col-4>
          <ion-label class="Desc_input" color="dark" stacked>Peso:</ion-label>
        </ion-col>
        <!-- ! -->
        <ion-col col-8>
          <ion-input formControlName="peso" id="peso" class="input_peso" name="peso" type="number" required (ionChange)="getNum1($event)"></ion-input>
        </ion-col>
      </ion-row>
      <!-- ! -->
      <ion-row>
        <ion-col col-4>
          <ion-label class="Desc_input" color="dark" stacked>Preço:</ion-label>
        </ion-col>
        <!-- ! -->
        <ion-col col-8>
          <ion-input formControlName="preco" id="preco" class="input_peso" name="preco" type="number" required (ionChange)="getNum2($event)"></ion-input>
        </ion-col>
      </ion-row>
      <!-- ! -->
      <ion-row>
        <ion-col col-4>
          <ion-label class="Desc_input" color="dark" stacked>Total:</ion-label>
        </ion-col>
        <!-- ! -->
        <ion-col col-8>
          <ion-input formControlName="total" type="number" name="total" class="input_peso"></ion-input>
        </ion-col>
      </ion-row>
      <!-- ! -->
      <ion-row>
        <ion-col col-6>
          <button ion-button block color="secondary" (click)="fim()">Calcular</button>
        </ion-col>
        <!-- ! -->
        <ion-col col-6>
          <button class="but_add_more" color="secondary" ion-button outline block (click)="addMore()">Mais Vendas</button>
        </ion-col>
      </ion-row>

    </ion-grid>
  </form>

</ion-content>

the scss:

page-calculadora {

  ion-card-title {
    font-weight: bold;
  }

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .inputCss {

    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.34) 0px 8px 18px 10px;
    background-color: rgb(243, 241, 241);
    opacity: 0.5;
  }

  button {
    margin: 5px;
  }

  .list {
    padding: 10px;
  }

  form {
    font-size: 15px !important;
  }    

  .men_zero {
    color: #f53d3d;
  }

  .input_peso {
    // border: 1px solid #A3A3A3;
    box-shadow: 3px 3px 10px 3px #A3A3A3;
  }

  .Desc_input {
    font-size: 18px !important;
  }

  .button-ios-secondary {
    color: #fff;
    background-color: #009C6D;
  }

  .button-outline-ios-secondary {
    border-color: #009C6D;
    color: #009C6D;
    background-color: transparent;
  }
  .produto{
    opacity: 0.5;
  }

  ion-col.prod-input{
    opacity: 0.5;
}

  ion-row.row.prod{
    opacity: 0.5;
  }

}

Can someone help me with this please?

Answer 1

Try to use ion-item shrouded in input. Ex:

<ion-item>
  <ion-input formControlName="total" type="number" name="total" class="input_peso"> </ion-input>
</ion-item>

(I do not know if it would be the solution, but I do not have enough points to comment)