When on IOS, ion-select doesn’t trigger choices when tapping on it. It does so when tapping on its boundaries / borders.
An example of faulty code :
<ion-list>
<ion-item no-padding>
<ion-label position="floating">{{'GENDER' | translate}}</ion-label>
<ion-select formControlName="gender">
<ion-select-option value="male">{{"MALE" | translate}}</ion-select-option>
<ion-select-option value="female">{{"FEMALE" | translate}}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
Am I missing something ?
The faulty part is the position="floating" on the label element. Removing it, or putting something else like stacked fixes the issue.
<ion-list>
<ion-item no-padding>
<ion-label>{{'GENDER'}}</ion-label>
<ion-select formControlName="gender">
<ion-select-option value="male">{{"MALE" }}</ion-select-option>
<ion-select-option value="female">{{"FEMALE"}}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
Add the tappable attribute to <ion-item>:
<ion-list>
<ion-item tappable no-padding>
<ion-label position="floating">{{'GENDER' | translate}}</ion-label>
<ion-select formControlName="gender">
<ion-select-option value="male">{{"MALE" | translate}}</ion-select-option>
<ion-select-option value="female">{{"FEMALE" | translate}}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
Related
I am developing an app using Ionic 3. I have an ion-item-sliding wrapped within an ion-list. I need to show the options when the list item is swiped. I got the color working but the text is not displaying at all. I don't have any css applied to the button at all.
<ion-list text-wrap>
<ion-list-header>
...
</ion-list-header>
<ion-item *ngIf="classes?.length === 0">No Data</ion-item>
<ion-item-group *ngFor="let classObj of classes">
<ion-item-divider>...</ion-item-divider>
<ion-item-sliding *ngFor="let class of classObj?.classes">
<ion-item *ngFor="let class of classObj?.classes">
<ion-grid>
...
</ion-grid>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary">
Change
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
I have no idea what went wrong. This happened to both Android and iOS
Its ok I have found the solution. I mistakenly *ngFor both ion-item-sliding and ion-item hence the slider breaks. I removed *ngFor in the ion-item and everything is works fine now
I think you have to provide small cancel button next to your ion-select, which appears only when the user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>
I am using ion-select in my app. But when i run it on the device, ion-select shows three dots in spite of having sufficient space.
My Code is
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item">
<ion-select placeholder="Size" interface="popover">
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
I have already tried using max-width:100% . ion-select works perfectly when i use it in new row. But i want to display it with other item in the same row.
Please help, i have been searching the net for the last 5-6 hours but no help.
Use text-wrap in ion-item or ion-select,it will wrap your select text.
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item" text-wrap>
<ion-select placeholder="Size" interface="popover" text-wrap>
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
Then if it is not working then give min-width to ion-select in css
I'm new in Ionic and I want to create list in which in each ion-item there will be checbox and when user checks it then select will appear in new line but still within ion-item. I've tried to use ion-item inside ion-item but then select wasn't showing. I've read that there is some issue with nested ion-items so I replaced first ion-item with ng-container but after that all layout looks terrible. What should I do?
<ion-list>
<ng-container *ngFor="let filter of filters">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked" (ionChange)="onCheckboxChange($event, filter)"></ion-checkbox>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ng-container>
</ion-list>
I figured it out - in ion-list I put ion-card-content with ngFor as a wrapper for ion-items. Works and looks good!
<ion-list>
<ion-card-content *ngFor="let filter of filters" class="card-wrapper">
<ion-item class="checkbox-item">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked"></ion-checkbox>
</ion-item>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-list>
As different option has different information to input I want to ask how can I have additional ion-item after an option is selected from ion-select.
These are my codes:
<ion-item>
<ion-label class="lbReward" color="dark" >Reward Type: </ion-label>
<ion-select (ionChange) = "onChange()" okText="Okay" cancelText="Dismiss" placeholder= "Select Type" formControlName = "rewardType" [ngModel] = "selectedRewardType">
<ion-option value="priceDiscount">Total Price Discount</ion-option>
<ion-option value="categoryDiscount">Category Price Discount</ion-option>
<ion-option value="freeGiftwithPrice">Sufficient Price Free Gift</ion-option>
<ion-option value="freeGiftwithMeal">Meal with Free Gift</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label color="dark" >Discount Percentage: </ion-label>
<ion-input name= "discountPercent" type="text" formControlName = "discountPercent"> </ion-input>
</ion-item>
I want to show the Discount Percentage only after I select Total Price Discount. Is there a way?
Add *ngIf statement to your <ion-item>
<ion-item *ngIf="selectedRewardType && selectedRewardType.length > 0">
<ion-label color="dark" >Discount Percentage: </ion-label>
<ion-input name= "discountPercent" type="text" formControlName = "discountPercent"> </ion-input>
</ion-item>
I have an ion-list on page, and I want to scroll only list-item, not the whole ion-content.
Here is my code:
<ion-content scroll="false" no-padding>
<ion-list>
<ion-list-header>Select your Status</ion-list-header>
<ion-scroll style="width:100%; height:100vh" scrollY="true">
<ion-item>
<h2>Available</h2>
</ion-item>
<ion-item>
<h2>Busy</h2>
</ion-item>
<ion-item>
<h2>At school</h2>
</ion-item>
<ion-item>
<h2>At the movies</h2>
</ion-item>
<ion-item>
<h2>At work</h2>
</ion-item>
<ion-item>
<h2>Battery about to die</h2>
</ion-item>
<ion-item>
<h2>Can't talk, text only</h2>
</ion-item>
<ion-item>
<h2>In a meeting</h2>
</ion-item>
<ion-item>
<h2>At the gym</h2>
</ion-item>
<ion-item>
<h2>Sleeping</h2>
</ion-item>
<ion-item>
<h2>Urgent calls only</h2>
</ion-item>
</ion-scroll>
</ion-list>
</ion-content>
I want to fix list-header "Select your status" and scroll only other list-items, but it hides list-header even when I have set scroll="false" to ion-content.
Please help.
Thanks in advance.
You can do as such:
html
<ion-header>
<ion-list-header>Select your Status</ion-list-header>
</ion-header>
<ion-content scroll="false" no-padding>
<ion-list>
<ion-scroll style="width:100%; height:100vh" scrollY="true">
<ion-item>
<h2>Available</h2>
</ion-item>
...
</ion-scroll>
</ion-list>
</ion-content>
Position your ion-list-header inside of ion-header to make it sticky
Result:
Add "sticky" attribute in ion-list-header tag.
Applicable in ionic 2, ionic 3, ionic 4