I'm creating a simple form with ionic 3 but I get a wrong focus position on the very first ion-input. Here is a screenshot of the problem :
You can see that the blue cursor is not positioned on the ion-input. But my code seems to be ok :
<ion-content padding>
<ion-list>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="username" placeholder="Your Username"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Other Username</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="snap_username" placeholder="Your Other Username"></ion-input>
</ion-item>
</ion-list>
</ion-content>
Anyone knows a solution to this issue?
Seems like I found the solution.
If it can help someone, the issue disappeared after I installed the WKWebview plugin.
Related
I employ an ionic range in my code with two icons at the beginning and the end. But these two icons didn't show up - only the range showed up. I have looked up their offcial document (https://ionicframework.com/docs/api/range) and here's my code (I basically copy their code):
<ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating"></ion-range>
<ion-icon slot="start" size="small" name="sad"></ion-icon>
<ion-icon slot="end" name="happy" ></ion-icon>
</ion-item>
Ionic document sometimes sucks and I really need someone to help me out.
You need to add icons inside ion-range tag and for the left icon add range-left attribute to the ion-icon tag and for the right icon add range-right attribute the icon as below.
<ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating">
<ion-icon range-left size="small" name="sad"></ion-icon>
<ion-icon range-right name="happy" ></ion-icon>
</ion-range>
</ion-item>
StackBlitz
I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks
<ion-list>
<ion-item><button ion-button (click)="gotoPage1();">Go page 1</button></ion-item>
<ion-item><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
The current answer (Ionic 4) requires that in addition to using text-center, your wrap the buttons in a label. This works correctly:
<ion-list>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage1();">Go page 1</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage2();">Go page 2</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage3();">Go page 3</ion-button>
</ion-label>
</ion-item>
</ion-list>
Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.
Read - Ionic CSS Utilities
you can use text-center
The inline contents are centered within the line box.
Try like this'
<ion-list >
<ion-item text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
stackblitz - code
You can use ionic's text-center CSS Utility. See https://ionicframework.com/docs/theming/css-utilities/
Example Usage:
<ion-item text-center>
<button ion-button>click me</button>
</ion-item>
If you don't want the whole item content to be centered you can use css to center just the button.
e.g. wrapping the button with a text-center wrapper div inside the ion-item
Ionic Framework Center button within ionic item
I used this method
<ion-grid>
<ion-row>
<ion-col size="12" class="ion-text-center">
<ion-button>
Login
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
I’m using IONIC 3.19.1.
<ion-content padding>
<ion-list>
<button ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</button>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
in the above code snippet the <h2>{{shift.operatorCode}}</h2> <p>{{shift.date}}</p> are note rendering. Pls see the attachment.
Thanks.
You are putting the HTML inside a button with the ion-item attribute. Change it to just using the ion-item element and if you need click handling the you can use the binding.
Should look something like this:
<ion-content padding>
<ion-list>
<ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</ion-item>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
I have the following:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Add new</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="ion-backdrop" padding>
<form [formGroup]="form1" class="form" (ngSubmit)="onSubmit(form1.value)">
<ion-card>
<ion-list>
<ion-item>
<ion-label>Available:</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" formControlName="dateAvailableFormControl">
</ion-datetime>
</ion-item>
</ion-list>
</ion-card>
</form>
</ion-content>
and my ts code is:
this.dateAvailableFormControl.setValue(this.data.DateAvailable);
where this.data.DateAvailable is Date type.
I cannot see anything when page loads. All other bindings work fine except from the ion-datetime.
Does anyone knows why this happens?
Thanks in advance
I think I found what was the problem. Dont know if this is a bug of ionic 2 or is how it works with ng2.
My Date value was
2016-11-29T09:15:48.8579573Z
as soon as I change it to:
2016-11-29T09:15:48.857Z
it worked.
Is there a simple way to make ion-cards swipe rather than stack vertically one above the other?
I currently have the cards stacking vertically using this code:
<ion-content class="outer-content speaker-list">
<ion-card *ngFor="#speaker of speakers" class="speaker">
<ion-card-header>
<ion-item>
<ion-avatar item-left>
<img [src]="speaker.profilePic">
</ion-avatar>
{{speaker.name}}
</ion-item>
</ion-card-header>
<ion-card-content class="outer-content">
<ion-list>
<button ion-item *ngFor="#session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
</button>
<button ion-item (click)="goToSpeakerDetail(speaker)">
<h3>About {{speaker.name}}</h3>
</button>
</ion-list>
</ion-card-content>
<ion-item>
<button (click)="goToSpeakerTwitter(speaker)" clear item-left>
<ion-icon name="logo-twitter"></ion-icon>
Tweet
</button>
<button (click)="openSpeakerShare(speaker)" clear item-right>
<ion-icon name="share"></ion-icon>
Share
</button>
</ion-item>
</ion-card>
</ion-content>
I am looking for a simple way to get them to swipe rather than stack. There are various plugins that do Tinder like swiping cards but I was wondering if there is a setting that can be given to ion-card to make the cards do a simple swipe (I am not looking for the Tinder visual effect) like a carousel.
I am using ionic V2.