How to delete the space between the line under the UPDATE INTERVAL and range itself?
my code:
<div class="range">
<ion-list>
<ion-list-header>
update interval
<ion-badge item-right>{{timePeriod}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-range min="1" max="60" [(ngModel)]="timePeriod">
<ion-label range-left>1</ion-label>
<ion-label range-right>60</ion-label>
</ion-range>
</ion-item>
</ion-list>
</div>
And btw - is it ok to put elements inside the tag in Ionic2?
The ion-list-header element has a margin-bottom, so you can set it to 0 to remove it:
ion-list-header.list-header { margin-bottom: 0; }
Related
I have an "ion-list" in an "ion-item" from a parent list in a view. But, the child list doesn't display any data. Here's the code i use to diplay the lists :
<ion-list>
<ion-list-header>
{{ 'forms.settings.areas' | translate }}
</ion-list-header>
<ion-item *ngFor="let area of areas">
<ion-list>
<ion-item class="item-thumbnail-left">
<ion-avatar>
<img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
</ion-avatar>
<h2>{{ area.translations.fr }}</h2>
</ion-item>
<ion-item>
<ion-label floating>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
<ion-toggle [(ngModel)]="area.followDLC" [checked]="area.id == 1" color="primary"></ion-toggle>
</ion-item>
<ion-item *ngIf="area.followDLC">
<ion-label floating>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
<ion-range min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
<ion-label range-left>0</ion-label>
<ion-label range-right>7</ion-label>
</ion-range>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
The ion-list-header is correctly rendered, but the other items are blank.
The "areas" structure on which i loop is an array of objects and seems correct :
[{"id":1,"type":"area","translations":{"fr":"Frigo","en":"Fridge"},"stats":{"totalProducts":5,"totalQuantity":5,"stockPrice":null,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"frigo.png","_id":"1","_rev":"50-55c270db9c0ac62ae8e378e1773a390c","followDLC":true,"alertBefore":7},
{"id":2,"type":"area","translations":{"fr":"Congélateur","en":"Freezer"},"stats":{"totalProducts":5,"totalQuantity":1,"stockPrice":4.99,"alertOnPeremption":0,"alertOnStockLevel":1},"logo":"congelateur.png","_id":"2","_rev":"19-307ca9a1882e4c1781cad5b062cdd920","followDLC":false,"alertBefore":0},
{"id":3,"type":"area","translations":{"fr":"Garde-Manger","en":"Pantry"},"stats":{"totalProducts":11,"totalQuantity":5,"stockPrice":25.48,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"garde-manger.png","_id":"3","_rev":"118-2746786125e84ae31dd9bfaaecd73118","followDLC":false,"alertBefore":0}]
The screenshot of the result follows :
Someone can help ?
Okay...
Don't know why the first code doesn't render the way i want... But, i change the view this way :
<ion-item-group *ngFor="let area of areas">
<ion-item-divider color="light">
<ion-avatar>
<img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
</ion-avatar>
<h2>{{ area.translations.fr }}</h2>
</ion-item-divider>
<ion-item>
<ion-label item-left stacked>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
<ion-toggle item-right [(ngModel)]="area.followDLC" [checked]="area.followDLC" color="primary"></ion-toggle>
</ion-item>
<ion-item>
<ion-label item-left stacked>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
<ion-range item-right min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
<ion-label range-left>0</ion-label>
<ion-label range-right>7</ion-label>
</ion-range>
</ion-item>
</ion-item-group>
Then, labels and input renders the way i want...
Thx all
I want to disable buttons when fields are empty.
Template:
<ion-content padding text-center class="product">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price"></ion-input>
</ion-item>
<button ion-button block (click)="checkPrice()" [disabled]="!(product.price && product.productName) ? true : null">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!(product.price && product.productName) ? true : null">Добавить в чек</button>
When I run this on browser - data binding works fine.
when I run this on device - data binding does not work:
I think you can do this using <form> and required in <ion-input> like:
<ion-content padding text-center class="product">
<form #demoForm="ngForm">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName" required></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price" required></ion-input>
</ion-item>
</form>
<button ion-button block (click)="checkPrice()" [disabled]="!demoForm.form.valid">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!demoForm.form.valid">Добавить в чек</button>
Just an example. You need to check other parts/conditions in your code if you have any.
I want to display label and input on left side sequentially and button/icon on right side.
i have tried with using grid as
<ion-grid>
<ion-row>
<ion-col width-10>
<ion-icon name="phone-portrait"></ion-icon>
</ion-col>
<ion-col width-70>
<ion-input type="text" placeholder="Mobile no"></ion-input>
</ion-col>
<ion-col width-10>
<ion-icon name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
It display's it inline but the input box slightly goes below.
also tried with item-left and item-right properties. but cant able to do.
Try this:
<ion-item>
<ion-icon item-left name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-right name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
You will probably have to override some of the css in the elements of ion-grid otherwise.
UPDATE From ionic#3.4.0 :
Thanks to #keldar for the comment. According to the docs,directional properties item-left and item--right are deprecated and you would need to use item-start and item-end which would allow to support both Right to Left and Left to Right.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
ion-row has several attributes (see Row). The one that looks suitable for you is align-items-center.
So, you can try this:
<ion-grid>
<ion-row align-items-center>
...
if you add new col, it mean that will be another column and you don't have unspecified the dimensions of these
When you add
you can insert one ion-item to insert everything on the same line without static sizes.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
I am developing a Mobile App using the Ionic2-Framework along with Angular2.
In a section of my app, I have several <ion-slides> with <ion-item><ion-input ...></ion-input></ion-item> on the slides.
When changing the slide, the keyboard opens up without actively touching one of the input-fields. So far, I could only test it on iOS, but I found out that it only happens for type="tel"-inputs
Is there a way to prevent the app from doing this, as I would like the users to choose the time to input by themselves.
The code of my page looks like that:
(I excluded some parts for readability)
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle [hidden]="showBackButton">
<ion-icon color="primary" name="menu"></ion-icon>
</button>
<button color="light" ion-button icon-only [hidden]="!showBackButton" (click)="goToPreviousSlide()">
<ion-icon color="primary" name="arrow-back"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides (ionSlideDidChange)="updateShowBackButton()">
<!-- Some more slides... -->
<ion-slide style="background-color: white" padding>
<h2 class="slide-title">Hello {{person.name}}!</h2>
<p>Now I need this and that information:/p>
<ion-item>
<ion-label>Day</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.day"></ion-input>
</ion-item>
<ion-item>
<ion-label>Month</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.month"></ion-input>
</ion-item>
<ion-item>
<ion-label>Year</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.year"></ion-input>
</ion-item>
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label>Height (cm)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.height"></ion-input>
</ion-item>
<ion-item>
<ion-label>Weight: (kg)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.weight"></ion-input>
</ion-item>
<button ion-button block (click)="goToNextSlide()">Next</button>
</ion-slide>
<!-- Some more slides... -->
</ion-slides>
</ion-content>
If you need futher information, please let me know! I am appreciating any hints! :)
I am working on Ionic v2 and and facing issue in aligning ion-label value to the right. Following is the code snippet:
Html Code:
<ion-content padding class="home">
<ion-list>
<ion-item class="clearme">
<ion-label>Employee Name:</ion-label>
<ion-label class="alignme">Gaurav</ion-label>
</ion-item>
</ion-list>
CSS:
.home {
background-color: red;
}
.alignme {
float:right !important;
}
.clearme {
clear: both !important;
}
After adding these classes text is not getting aligned to right.
You can also use text-right attribute directive like below.
<ion-label text-right>Gaurav</ion-label>
For detail information about attribute directives, see here
Edit for Ionic 5
<ion-label class="ion-text-right">...</ion-label>
Just use text-align instead of float.
.alignme {
text-align: right;
}
Btw you should use ion-label only with forms - ion-input, ion-checkbox etc.
Ionic has a built-in solution for this:
Documenation
Version 2-3:
<ion-label ion-text-center>
Centered text
</ion-label>
Version 4+:
<ion-label class="ion-text-center">
Centered text
</ion-label>
If still not success try this
//html
<ion-item>
<ion-input type="text" placeholder="Username"></ion-input>
<ion-label class="alignme">
<ion-icon name="logo-playstation"></ion-icon>
</ion-label>
</ion-item>
//css
.alignme{
position:absolute;
right:0
}
in ionic 5 this worked for me.
<ion-item>
<ion-label slot="start">Left Side</ion-label>
<ion-label slot="end">Right Side</ion-label>
</ion-item>