Ionic Form's top item goes behind ion-header. Below is the HTML.
<ion-header>
<ion-navbar hideBackButton color="dark">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>REGISTER</ion-title>
</ion-navbar>
</ion-header>
<ion-content class='has-header'>
<form [formGroup]="todo" (submit)="logForm()" padding class="bg-register-image">
<ion-list>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input [(ngModel)]="emaill" type="email" formControlName="emaill"></ion-input>{{emaill}}
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input [(ngModel)]="Password" type='password' formControlName="password"></ion-input>
</ion-item>
</ion-list>
<button ion-button block position="bottom" type="submit" item-left [disabled]="!todo.valid">Submit</button>
<button block ion-button color="secondary" [navPush]="homepage" item-left>CANCEL</button>
</form>
</ion-content>
Let me know what to change. Thanks in Advance.
Related
<ion-list>
<ion-item-sliding #item>
<ion-item class="green">
<ion-row class="row" *ngFor="let row of grid; let rowIndex=index">
<ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
<button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options class="green" side="left">
<button ion-button color="danger" (click)="deleteItem(item)">Entfernen</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Problem: When I have multiple rows and I try to slide one, but it slides all rows along with it and instead of having the action button left to the slided row only, the button appears as one big button on the left of all rows.
You need to make multiple ion-item-sliding elements instead of multiple rows within one ion-item-sliding element.
<ion-list>
<ion-item-sliding *ngFor="let row of grid; let rowIndex=index"> <!-- for loop here -->
<ion-item class="green">
<ion-row class="row">
<ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
<button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options class="green" side="left">
<button ion-button color="danger" (click)="deleteItem(row)">Entfernen</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
I am trying to do something very basic: A label above the input field.
For some reason, this is not working. Any clue ?
<ion-header>
<ion-navbar>
<ion-title>
The App
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item no-lines>
<ion-label stacked>First name</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item no-lines>
<ion-label stacked>Last name</ion-label>
<ion-input type="text" placeholder="Last Name"></ion-input>
</ion-item>
</ion-content>
<ion-footer>
<div (click)="goHome()">Cancel</div>
<div (click)="save()">Update</div>
</ion-footer>
As you can see in the docs
change your code to <ion-label stacked> and it should appear on top of your ion-input
I have made a simple ion-navbar in the header. I have 3 buttons on it. When I am running it on the browser, it is working fine. But, if I test it on an emulator it looks like the 2nd image.
This is may header :
<ion-header>
<ion-navbar color="leo">
<button ion-button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ appName }}</ion-title>
<ion-buttons end >
<button ion-button (click)="goContactPage()" >
<ion-icon name="chatboxes"></ion-icon>
</button>
<button ion-button (click)="presentPopover($event)">
<ion-badge *ngFor="let n of nbr" color="danger" >{{n.total}}</ion-badge>
</button>
<button ion-button (click)="goAbout()" >
<ion-icon name="calendar"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<button ion-button icon-only menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
<ion-segment [(ngModel)]="icons" color="secondary">
<ion-segment-button (click)="goContactPage()">
<ion-icon name="chatboxes"></ion-icon>
</ion-segment-button>
<ion-segment-button (click)="goAbout()">
<ion-icon name="calendar"></ion-icon>
</ion-segment-button>
<ion-segment-button (click)="presentPopover($event)">
<ion-badge *ngFor="let n of nbr" color="danger" >{{n.total}}</ion-badge>
</ion-segment-button>
</ion-segment>
How do we apply the default alignment classes provided by Ionic2? For example, I want a button to appear on the right side of a card.
<ion-card *ngFor="let table of tables">
<ion-card-content>
Card Text
<button ion-button>
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-card-content>
</ion-card>
Check Item placement section here
You can use ion-item to wrap and placement attribute.
for example:
<ion-card *ngFor="let table of tables">
<ion-card-content>
<ion-item>
Card Text
<button item-right ion-button>//item right
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-item>
</ion-card-content>
</ion-card>
Or you can use Grid-row ,cols
<ion-card *ngFor="let table of tables">
<ion-card-content>
<ion-row>
<ion-row>
<ion-col width-80>
Card Text
</ion-col>
<ion-col>
<button ion-button>
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
I am trying to create 2 menus on a page in Ionic2
app.html
<ion-menu [content]="content" side="right" id="menu1">
<ion-content>
<ion-list>
<button ion-item menuClose="menu1" detail-none>
Close Menu 1
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu [content]="content" side="left" id="menu2">
<ion-content>
<ion-list>
<button ion-item menuClose="menu2" detail-none>
Close Menu 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
hello-ionic.html:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>
<button ion-button color="secondary" menuToggle="left">Toggle Main Menu</button>
</p>
<p>
<button ion-button color="primary" menuToggle="right">Toggle Menu</button>
</p>
</ion-content>
The problem I am facing is that only menu2 is working, menu1 is not appearing. If I delete menu2 than menu1 is working.
Please help
I also have problems like you
And my solution is
file app.html edit like:
<ion-menu [content]="content" side="left" id="menu1">
This is menu 1
</ion-menu>
<ion-menu [content]="content" side="right" type="overlay" id="menu2">
This is menu 2
</ion-menu>
<ion-nav [root]="rootPage" [rootParams]="rootParams" #content swipeBackEnabled="false"></ion-nav>
file app.component.ts
add in constructor() {
...
this.menu.enable(true, 'menu1');
this.menu.enable(true, 'menu2');
}
USING:
PAGE.html
<ion-header>
<ion-navbar color="mytheme">
<button ion-button menuToggle="left" start>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>PAGENAME</ion-title>
<button ion-button menuToggle="right" end>
<ion-icon name="star"></ion-icon>
</button>
</ion-navbar>
</ion-header>
Wish you success :)))))))