When I click on the last ion-input, ion-input display below the keyboard this is my HTML field
<ion-list>
<ion-label> Conveyance
</ion-label>
<ion-item>
<ion-input type="number" [(ngModel)]="modelfirst.conveyance"></ion-input>
</ion-item>
<ion-label> HRA
</ion-label>
<ion-item>
<ion-input type="number" [(ngModel)]="modelfirst.hra"></ion-input>
</ion-item>
<ion-label> Interest Paid on Home Loan
</ion-label>
<ion-item>
<ion-input type="number" [(ngModel)]="modelfirst.home_loan"></ion-input>
</ion-item>
</ion-list>
Everything working on an Android device but not working in iOS if any kind of help let me know.
Related
i try to show a back button to switch between my components.
To do so i created this header:
<ion-header translucent >
<ion-toolbar >
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Registrieren</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<form [formGroup]="authdetails" >
<ion-item >
<ion-label position="floating">E-Mail</ion-label>
<ion-input formControlName="email" type="email"></ion-input>
</ion-item>
<ion-item >
<ion-label position="floating">Nutzername</ion-label>
<ion-input formControlName="nickname" type="email"></ion-input>
</ion-item>
<ion-item >
<ion-label position="floating">Passwort</ion-label>
<ion-input formControlName="pw" type="password"></ion-input>
</ion-item>
<br>
<ion-item lines="none">
<ion-label >Hiermit bestätige ich den Datenschutz</ion-label>
<ion-checkbox slot="start" formControlName="privacy"></ion-checkbox>
</ion-item>
<ion-item lines="none">
<ion-label >Hiermit bestätige ich die AGB's </ion-label>
<ion-checkbox slot="start" formControlName="agb"></ion-checkbox>
</ion-item>
</form>
<div align="center">
<button class="button register"
(click)="performRegister()">Registrieren</button>
</div>
</ion-content>
The way i'm routing to this view is like i did here:
<button class="button register" routerLink="/register">Kostenlos Registrieren</button>
The problem is that the back button is showed really small, please find attached a screenshot:
Label isn't moving when input will be focus. If input hasn't placeholder it works fine but in my case it has a placeholder. How can I fix it?
<ion-item>
<ion-label position="floating" >{{ 'enterPhoneNumber' | translate}}</ion-label>
<ion-input placeholder="Phone" name="phone" type="text" required ></ion-input>
</ion-item>
The placeholder text has to go with the ion-label tags... Please refer the official docs.
<ion-item>
<ion-label position="floating"> Phone </ion-label>
<ion-input required [(ngModel)]="enterPhoneNumber" type="text"></ion-input>
</ion-item>
I am working in my Ionic 4 app and I have a form in that my keyboard enter is not working in Android.
This is my signin.page.html:
<form [formGroup]="userlogindet" (ngSubmit)="UserLoginDetails()">
<ion-list>
<ion-item class="newitem2">
<ion-input placeholder="Email*" type="email" formControlName="email"></ion-input>
</ion-item>
<p *ngIf="userlogindet.get('email').errors && userlogindet.get('email').dirty && userlogindet.get('email').touched"
class="myp2">EMAIL_NOT_VALID</p>
<ion-item class="newitem2">
<ion-input placeholder="Password*" type="password" formControlName="password" required></ion-input>
</ion-item>
<ion-input type="hidden" formControlName="social_type" hidden></ion-input>
</ion-list>
<ion-button [disabled]="!userlogindet.valid" class="mybtn1" type="submit" color="danger" (keyup.enter)="enablelogintracking()" expand="full" fill="solid">Login
</ion-button>
</form>
In this html file, I have a signin page in which I have the login button but it is not working when using the keyboard enter.
I have also used the (keyup.enter) after that also it is not working.
Any help is much appreciated.
I have an ion-list on page, and I want to scroll only list-item, not the whole ion-content.
Here is my code:
<ion-content scroll="false" no-padding>
<ion-list>
<ion-list-header>Select your Status</ion-list-header>
<ion-scroll style="width:100%; height:100vh" scrollY="true">
<ion-item>
<h2>Available</h2>
</ion-item>
<ion-item>
<h2>Busy</h2>
</ion-item>
<ion-item>
<h2>At school</h2>
</ion-item>
<ion-item>
<h2>At the movies</h2>
</ion-item>
<ion-item>
<h2>At work</h2>
</ion-item>
<ion-item>
<h2>Battery about to die</h2>
</ion-item>
<ion-item>
<h2>Can't talk, text only</h2>
</ion-item>
<ion-item>
<h2>In a meeting</h2>
</ion-item>
<ion-item>
<h2>At the gym</h2>
</ion-item>
<ion-item>
<h2>Sleeping</h2>
</ion-item>
<ion-item>
<h2>Urgent calls only</h2>
</ion-item>
</ion-scroll>
</ion-list>
</ion-content>
I want to fix list-header "Select your status" and scroll only other list-items, but it hides list-header even when I have set scroll="false" to ion-content.
Please help.
Thanks in advance.
You can do as such:
html
<ion-header>
<ion-list-header>Select your Status</ion-list-header>
</ion-header>
<ion-content scroll="false" no-padding>
<ion-list>
<ion-scroll style="width:100%; height:100vh" scrollY="true">
<ion-item>
<h2>Available</h2>
</ion-item>
...
</ion-scroll>
</ion-list>
</ion-content>
Position your ion-list-header inside of ion-header to make it sticky
Result:
Add "sticky" attribute in ion-list-header tag.
Applicable in ionic 2, ionic 3, ionic 4
I have a form with product rate and quantity inputs. I need to calculate the value (rate * quantity) and assign the value to amount input field.
Please find the code snippet below:
<form [formGroup]="additemForm" (ngSubmit)="submit(additemForm.value)" >
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-label>Product :</ion-label>
<ion-select formControlName="product">
<ion-option *ngFor="let product of productArray" value="{{product.code}}" selected="false">{{product.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value"></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" type="submit" [disabled]="!additemForm.valid">Submit</button>
<button ion-button type="button" (click)='cancel()' >Cancel</button>
</ion-col>
</ion-row>
</form>
You need to use [(ngModel)] for this.
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty" [(ngModel)]="quantity"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate" [(ngModel)]="rateValue"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value" [(ngModel)]="rateValue * quantity"></ion-input>
</ion-item>
Now, still amount input field will be edible after this. And changing this value will affect the other 2 input values also. You can disable the input, so it will appear as a read-only input. This worked in my code.