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
Related
I'm trying to create a card in my ionic 2 application, like this example from the documentation:
So I wrote this:
<ion-content padding>
<ion-card *ngFor="let item of myItems">
<ion-item id="card-header">
<ion-avatar item-start>
<img src="image_url" >
</ion-avatar>
<h2>Person name</h2>
<p>99/99/9999</p>
</ion-item>
<ion-card-content>
My content
</ion-card-content>
</ion-card>
</ion-content>
But what I'm getting is this:
As you can see the avatar is positioned on a full line, not on the same line as the person name and other line. Why my avatar icon is not beeing shown on the left side of the line?
I have a page which shows list of images in a grid. Each picture has a constant height and width. When the user resizes the browser or loads the page, I want the number of images per row to be depending on the screen size. For larger screen sizes, the more images.
For now I tried this.
<ion-grid>
<ion-row>
<ion-col col-3 *ngFor="let product of products">
<ion-card>
<ion-card-content>
<div (click)="OpenProductDetails(product.ProductId)">
<img src="{{product.MainMediaUrl}}" style="height:200px; width:200px; margin:auto; margin-top:15px" />
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
Now on page load, it is loading correctly, but as I change the browser size or I make portrait to landscape, it is still the same and not responsive.
How can I fix this.
You could set breakpoints to your grid cols like this
<ion-col col-xs-3 col-sm-4 col-md-2 col-lg-2 col-xl-1 *ngFor="let product of products">
col-xs- sets col for min-width: 0px and forward.
col-sm- sets col for min-width: 576px and forward.
col-md- sets col for min-width: 768pxand forward.
col-lg- sets col for min-width: 992px and forward.
col-xl- sets col for min-width: 1200px and forward.
Knowing this, if you set a col-md- it'll set the same number to cols lg and xl. Just see what's better for your problem, if in larger displays the image breaks then you can set a smaller number of columns when in mddisplays or larger.
Hope this helps.
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>
I put two images side by side on one page under the header as col-50. The issue is I want both images the full 50% width without any padding around any edges. I can't seem to figure it out with CSS
<div class="col col-50 row-no-padding">
<img src="img/facebook.jpg" style="width:100%; display: inline-block">
</div>
<div class="col col-50 row-no-padding">
<img src="img/twitter.jpg" style="width:100%; display: inline-block">
</div>
The above worked in my browser (ionic serve) but did not work on my device.
the problem is images are considered to be inline, as a result any white space is considered as space, try this:
<!-- both images should be in-line to have it working -->
<img style="width:50%; display: inline-block" src="the_image_source"/>
<img style="width:50%; display: inline-block;" src="the_image_source/>
you can also isolate the css if you wish
img{
style: inline-block;
width: 50%;
}
You could just use :
no-padding
to the col div
<ion-row>
<ion-col col-6 no-padding></ion-col>
<ion-col col-6 no-padding></ion-col>
</ion-row>
See Ionic Documentation for Grid
Hope this helps.
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.