I'm building an Ionic 2 app that has a <ion-list> with <ion-item>s with (click) events. On loading the page with the <ion-list> it takes a few seconds before the <ion-item> click events become active and tappable. Tapping the items has no effect until a couple of seconds after the page has loaded.
I have only a few items in the list, and have tried with the virtualScroll list but to no effect.
What could be the cause of this?
I've figured out a work around for this unresponsiveness. Instead of using an ion-item use a <div> tag with tappable and ion-item attributes set.
The code below shows the fix in place
<ion-list [virtualScroll]="news">
<div tappable ion-item *virtualItem="let n" text-wrap (click)="openNews(n)">
<ion-row>
<ion-col width-20>
<img *ngIf="n.thumbnail" [src]="n.thumbnail">
</ion-col>
<ion-col width-80 text-wrap>
<h2>{{n.post_title}}</h2>
<p [innerHTML]="n.post_excerpt"></p>
</ion-col>
</ion-row>
</div>
</ion-list>
Related
The reorder function seems to be attaching reorder icons to all the nested items within my ngFor list. So with 2 items being a checkbox and a text-input, I get 2 extra (3 total) reorder icons per list item. Only one of them works, the other two are just visual. I need to remove the other 2 and just have one clean reorder icon per item, or something to that effect.
I have tried removing the nested items, but the checkbox and text-input don't work.
/// Here is the HTML ///
<ion-list no-lines [reorder]="reorderIsEnabled" (ionItemReorder)="itemReordered($event)" id="lowtrimlist">
<ion-item-sliding *ngFor="let task of tasks; let taskIndex = index">
<ion-item>
<ion-row>
<ion-col col-1>
<ion-item no-lines>
<ion-checkbox></ion-checkbox>
</ion-item>
</ion-col>
<ion-col col-11>
<ion-item>
<ion-textarea>
</ion-textarea>
</ion-item>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger"(click)="delete()">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
What I'm looking for is there to be one single reorder icon per line item, but instead there are 3. It seems like the reorder function picks up and tries to label every internal item.
Follow an Ionic 4 tutorial
Based on your comments it's not clear where you have got your method from but it's not what the documentation says, and it's not what I have seen before.
I suspect you are using some kind of legacy support mode from earlier version of Ionic.
I actually just learned to use ion-reorder myself recently and I followed this tutorial:
https://www.freakyjolly.com/ionic-4-ion-reorder-list-drag-drop-sorting-list-in-ionic-4-using-ion-reorder-component/
Did you paste the right html snippet?
I would expect to see a combination of ion-reorder-group and ion-reorder like this:
<ion-list>
<ion-reorder-group (ionItemReorder)="onReorderItems($event)" [disabled]="!isGameRunning">
<ion-item *ngFor="let item of listItems" [class]="item?.cssClass">
<ion-label>{{ item?.name }} </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
Test
As a test I just put an extra ion-item inside the ion-item above and ran it in a little game I made recently:
<ion-list>
<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="!isGameRunning">
<ion-item *ngFor="let item of listItems" [class]="item?.cssClass">
<ion-label>{{ item?.name }} </ion-label>
<ion-item>inner item</ion-item>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
It rendered ok:
Implementing programmatically?
All of this is leading me to think that its a coding error. Are you trying to implement the reordering programmatically?
Please share your snippet but you just need to use the ion-reorder-group, ion-reorder and disable="false" to display it.
I'm using Ionic 4 and tab layout.
I have one tab page with QR Code Scanner. Hence the the page is set to transparent as below
<ion-content padding color="transparent">
<ion-item lines="none" class="top-content">
<ion-grid>
<ion-row>
<ion-col>
<ion-label text-center no-margin>
Scan QR Code to start
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
and have following interface
The second tab displays a list of items and thus have pull-to-refresh on the page. The code is
<ion-header>
<ion-toolbar color="primary">
<ion-title>Item List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-refresher slot="fixed" (ionRefresh)="refreshList($event)">
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<ion-card color="primary" (click)="showAction(1)">
<ion-card-content>
<!-- item content -->
</ion-card-content>
</ion-card>
</ion-content>
But on pulling the page, it shows transparent background from the first page where the QR Code scanner has opened the camera and thus on pulling it shows camera output.
How can I close or hide page before opening a new page?
I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks
<ion-list>
<ion-item><button ion-button (click)="gotoPage1();">Go page 1</button></ion-item>
<ion-item><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
The current answer (Ionic 4) requires that in addition to using text-center, your wrap the buttons in a label. This works correctly:
<ion-list>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage1();">Go page 1</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage2();">Go page 2</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage3();">Go page 3</ion-button>
</ion-label>
</ion-item>
</ion-list>
Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.
Read - Ionic CSS Utilities
you can use text-center
The inline contents are centered within the line box.
Try like this'
<ion-list >
<ion-item text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
stackblitz - code
You can use ionic's text-center CSS Utility. See https://ionicframework.com/docs/theming/css-utilities/
Example Usage:
<ion-item text-center>
<button ion-button>click me</button>
</ion-item>
If you don't want the whole item content to be centered you can use css to center just the button.
e.g. wrapping the button with a text-center wrapper div inside the ion-item
Ionic Framework Center button within ionic item
I used this method
<ion-grid>
<ion-row>
<ion-col size="12" class="ion-text-center">
<ion-button>
Login
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
On my homepage I have a set of tabs. When I click on the + icon, a new page (AddReportPage) is being pushed (this.navCtrl.push(AddReportPage)).
On this new page I want to display a new set of tabs with different icons and different functions(see image 2).
But when I use the ion-tabs, they're not being displayed...
These tabs have to execute functions with ionSelect.
Do you have a solution?
1.
2.
You could try to use the tabsHideOnSubPages property in your tab tag: Ionic Docs - Tab.
<ion-tabs>
<ion-tab tabsHideOnSubPages="true" [root]="AddReportPage"></ion-tab>
</ion-tabs>
Then in your pushed page you'll be able to see the tabs from there.
I managed to get pretty much the same result with an ion-toolbar in a ion-footer.
Thanks for the help!
<ion-footer>
<ion-toolbar>
<ion-row>
<ion-col no-padding>
<button ion-button icon-only clear (click)="getPicture()">
<ion-icon name="images"></ion-icon>
</button>
</ion-col>
<ion-col no-padding>
<button ion-button icon-only clear (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</button>
</ion-col>
<ion-col no-padding>
<button ion-button icon-only clear>
<ion-icon name="paper-plane"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
Is there a simple way to make ion-cards swipe rather than stack vertically one above the other?
I currently have the cards stacking vertically using this code:
<ion-content class="outer-content speaker-list">
<ion-card *ngFor="#speaker of speakers" class="speaker">
<ion-card-header>
<ion-item>
<ion-avatar item-left>
<img [src]="speaker.profilePic">
</ion-avatar>
{{speaker.name}}
</ion-item>
</ion-card-header>
<ion-card-content class="outer-content">
<ion-list>
<button ion-item *ngFor="#session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
</button>
<button ion-item (click)="goToSpeakerDetail(speaker)">
<h3>About {{speaker.name}}</h3>
</button>
</ion-list>
</ion-card-content>
<ion-item>
<button (click)="goToSpeakerTwitter(speaker)" clear item-left>
<ion-icon name="logo-twitter"></ion-icon>
Tweet
</button>
<button (click)="openSpeakerShare(speaker)" clear item-right>
<ion-icon name="share"></ion-icon>
Share
</button>
</ion-item>
</ion-card>
</ion-content>
I am looking for a simple way to get them to swipe rather than stack. There are various plugins that do Tinder like swiping cards but I was wondering if there is a setting that can be given to ion-card to make the cards do a simple swipe (I am not looking for the Tinder visual effect) like a carousel.
I am using ionic V2.