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.
Related
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 am trying to have a ion-header where one icon is on left and another on right. my code looks like below
<ion-header>
<ion-navbar>
<ion-buttons icon-start>
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>about</ion-title>
<ion-buttons icon-end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
but what is hapenning is that i see it coming in 3 different rows.
ok, you need remove the first <ion-buttons> and leave only <button> and on the second tag of <ion-buttons> change icon-end to end.
and it should work!!
Welcome to StackOverflow!
Since Ionic applies the android/ios standards based on the current platform where the app is running, you need to understand the meaning of the following attributes: start, end, left and right.
About end/start/left/right
Using the start attribute in the ion-buttons doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first button on the right for android.
And <ion-buttons end> would be on the right for ios and the last button on the right for android.
So with both start or end the button will be placed at the right on Android.
If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that. It's easier to see with a few examples, so please take a look at the following examples.
Example 1: Using start and end
<ion-header>
<ion-navbar>
<ion-buttons start> <!-- Here we use start -->
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons end> <!-- Here we use end -->
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The result is:
iOS
Android
Example 2: Using left and right
<ion-header>
<ion-navbar>
<ion-buttons left> <!-- Here we use left -->
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons right> <!-- Here we use right -->
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The result is:
iOS
Android
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>
When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
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.