0

Gente, toda vez que eu testo no celular o meu app, e clico no input que tem, o teclado fica cobrindo a tela toda e não consigo visualizar o que esta sendo digitado no input, já olhei meu css e pelo que vi nada lá ta impactando nisso.

E tem outra coisa, ele nao ta dando scroll, quando a tela do celular é menor que as outras, ele acaba nao mostrando a tela toda pq o scroll nao ta funcionando.

o 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>

o 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;
  }

}

Alguém pode me ajudar nisso por favor?

1 Resposta 1

1

Tente usar ion-item envolto do input. Ex:

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

(Não sei se seria a solução, porem não tenho pontos suficientes para comentar)

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .