I am showing below the two versions of ionic code that I have written. The one which uses ion-avatar doesn't seem to work but if I use item-avatar it does.
This one doesn't work
<ion-list inset>
<ion-item ng-repeat="leader in leaders" class="item item-text-wrap">
<ion-avatar item-left>
<img ng-src="{{baseURL+leader.image}}">
</ion-avatar>
<h2>{{leader.name}}<h2>
<h3>{{leader.designation}}</h3>
<p>{{leader.description}}</p>
</ion-item>
</ion-list>
This one works
<ion-list inset>
<ion-item ng-repeat="leader in leaders" class="item-avatar item-text-wrap">
<img ng-src="{{baseURL+leader.image}}">
<h2>{{leader.name}}<h2>
<h3>{{leader.designation}}</h3>
<p>{{leader.description}}</p>
</ion-item>
</ion-list>
While my code is fine and working, I am wondering why the first one doesn't work. I have ionic 2.2.1 installed.
Thanks and Regards
ion-avatar is implemented in ionic2 version where as item-avatar is ionic1 compatible.
You might be using ion-avatar in a v1 app that is the reason for error.
you can check official docs for list-item here
ionic-2
ionic v1
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 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>
I'm creating a simple form with ionic 3 but I get a wrong focus position on the very first ion-input. Here is a screenshot of the problem :
You can see that the blue cursor is not positioned on the ion-input. But my code seems to be ok :
<ion-content padding>
<ion-list>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="username" placeholder="Your Username"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Other Username</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="snap_username" placeholder="Your Other Username"></ion-input>
</ion-item>
</ion-list>
</ion-content>
Anyone knows a solution to this issue?
Seems like I found the solution.
If it can help someone, the issue disappeared after I installed the WKWebview plugin.
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.
I have an ionic card. And there is only once card. It is big. But is is not scrollable. When I change the orientation to landscape half of the card will be hidden, and there is no way to scroll it.
<ion-content ng-controller="VideoCController">
<ion-list>
<div class="inset item-text-wrap">
<ion-item>
<h2>{{video.video_title}}</h2>
</ion-item>
<ion-item>
<div class="video-container">
<iframe ng-src="{{getIframeSrc(video.yt_id)}}" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
</ion-item>
<ion-item>
<h3>Lenght {{video.yt_length * 1000 | date:'mm:ss'}}</h3>
</ion-item>
<ion-item>
<p>{{video.description | htmlToPlaintext}}</p>
</ion-item>
</div>
Go to below to know more about how to make ionic scrollable, i haven't tried it but assuming that's the way to achieve scroll.
http://ionicframework.com/docs/api/directive/ionContent/
Let me know if you succeed.
Thanks
This answer is for general case of ionic-card scroll scenario. In Ionic versions below v4, we could use,
<ion-scroll scrollY="true">--content--</ion-scroll>.
But IonScroll is removed in Ionic v4. Therefore we have to use
<ion-card scrollY="true">--content--</ion-card>
like this.