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.
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 want to scroll my ion-card component horizontally but it's not working that way. I've tried every resource on the internet but it's not scrolling horizontally.
Here is my code.
<ion-scroll scrollX="true" style="width:100% ; height:400px">
<ion-card nowrap *ngFor="let id of mydata" >
<img src="assets/imgs/arpit.jpg"/>
<ion-card-content>
<ion-card-title>
{{id.name}}
</ion-card-title>
<p>
{{id.regular_price}}
</p>
</ion-card-content>
</ion-card>
</ion-scroll>
The output I am getting is like the image below.
Try adding this styles is easy to do link
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 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>
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.