i have problem with labels on Ionic v4.
When i look at the screenshot, you will see the weird look.
But my code just copied from Ionic docs.
Here my code
[![<ion-header>
<ion-toolbar color="primary">
<ion-title>
Titel
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Default</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>
</ion-content>]
screenshot
You can try with removing the tag because in their official website they didn't used tag to wrap the elements.So You can try like that -
<!-- Inputs with labels -->
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input></ion-input>
</ion-item>
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>
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
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 :)))))))