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>
Related
I have created an application with ionic3 having a side menu.
<ion-menu [content]="content" type="overlay" id="user-menu">
<ion-header no-border>
<ion-toolbar>
<img src="assets/imgs/ic_southend_logo.png" class="width-50 margin-top-10">
</ion-toolbar>
<div class="user-info">
<ion-row>
<ion-col col-3>
<img src="assets/imgs/ic_avatar.png" class="user-image">
</ion-col>
<ion-col col-7>
<div class="padding-top-10">
<label class="user-name"><b>USER1</b></label><br>
<label class="user-designation">Manager</label>
</div>
</ion-col>
<ion-col col-2 text-center>
<img src="assets/imgs/ic_arrow_forward.png" class="arrow-forward">
</ion-col>
</ion-row>
</div>
</ion-header>
<ion-content scroll="true" scrollbar-y="true">
<ion-list no-lines class="padding-top-10">
<button ion-item menuClose detail-none (tap)="openPageTab('ContactsPage')">
<img class="menu-image" src="assets/imgs/ic_contact_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('ContactPage')"> Key Contacts</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('BroadcastPage')">
<img class="menu-image" src="assets/imgs/ic_broadcast_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('BroadcastPage')"> Broadcasts</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('SettingsPage')">
<img class="menu-image" src="assets/imgs/ic_settings_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('SettingsPage')"> Settings</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('KeyinfoPage')">
<img class="menu-image" src="assets/imgs/ic_keyinfo_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('KeyinfoPage')"> Key info</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('FaqPage')">
<img class="menu-image" src="assets/imgs/ic_faq_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('FaqPage')"> FAQ</h3>
</button>
</ion-list>
</ion-content>
</ion-menu>
The issue here is menuClose is not working after multiple click on the side menu, means side menu is not closing even after touch on the menu.
Is there any solution for this?
Edit
Issues comes when using this.nav.push() there is no issues with this.nav.setRoot()
Thanks and Regards
Anand
try to use (click) instead of (tap) and let me know the feedback
<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>
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.
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>