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?