I want the ion-card to have a specific size and the ion-card-content to fit the ion-card.
Happens that inside ion-card-content I have an image that doesn't fit the ion-card sizes (height more precisely).
Here is the code:
<ion-content>
<ion-row *ngFor="let card of cardData">
<ion-col>
<ion-card style="height: 150px;">
<ion-card-title>{{card.cardTitle}}</ion-card-title>
<ion-card-content >
<ion-img [src]="card.cardImageSrc"></ion-img>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
And this is the result
I don't want the images to be cropped. I want them to fit the card no matter the size of the card. Already tried a lot of solutions found online but no one seems to work, since ion-card-content is always bigger than the ion-card
Since you have set the height attribute on <ion-card> to 150px, then you have to set the height attribute on <ion-img> to a value less than 150px (i.e 100px, Since you also have the title inside the ion-card).
Your code will be like the following
<ion-content>
<ion-row *ngFor="let card of cardData">
<ion-col>
<ion-card style="height: 150px;">
<ion-card-title>{{card.cardTitle}}</ion-card-title>
<ion-card-content >
<ion-img [src]="card.cardImageSrc" style="height: 100px;"></ion-img>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
Related
I have a grid that has one row, and use ngFor to loop multiple column for each cell. Inside each cell first row will be ion-item wrap a thumbnail and the label. Below there are 1 row with 2 col.
Example code.
<ion-grid>
<ion-row>
<ion-text color="primary"><h1>Title</h1></ion-text>
</ion-row>
<ion-row>
<ion-col *ngFor="let s of sList">
<ion-card>
<ion-row>
<ion-item>
<!-- picture -->
<ion-thumbnail slot="start">
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
</ion-thumbnail>
<ion-label>id : </ion-label>
</ion-item>
</ion-row>
<ion-row >
<ion-col >
<div class="ion-text-nowrap">This is content left</div>
</ion-col>
<ion-col >
<div class="ion-text-nowrap">This is content right</div>
</ion-col>
</ion-row>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
My problem is on desktop mode(1440x1062), after adding the ion-text-nowrap attribute the column explanded to whole row and forced the another column inside the row wrap below like this .
But what I want to achieve is something like this, and the code above works but only in mobile range,
once it gets to tablet range(768px) the problem mentioned above appeared.
How can make sure the text-no-wrap won't effects the tablet view and making sure those 2 column stay shoulder to shoulder?
I found the answer now, It has to do with setting the col size. For some reason, ion-col size attribute auto is different from not setting one. The difference seems to be :
set size auto -
set a same dynamic size for each col
not setting a size auto -
set different dynamic size for different col
so the code will be like this :
<ion-col size="auto" *ngFor="let s of sList">
<ion-card >
<ion-row>
<ion-item>
<ion-thumbnail slot="start">
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
</ion-thumbnail>
<ion-label>label</ion-label>
</ion-item>
</ion-row>
Small title --
<ion-row>
<ion-col><div class="ion-text-nowrap">a__item : xxxx</div></ion-col>
<ion-col><div class="ion-text-nowrap">b____item xxxx</div></ion-col>
</ion-row>
<ion-row>
<ion-col><div class="ion-text-nowrap">a__item : xxxx</div></ion-col>
<ion-col><div class="ion-text-nowrap">b____item xxxx</div></ion-col>
</ion-row>
</ion-card>
</ion-col>
Now the col won't expand whole row, each col has same size. And the text won't auto wrap.
I am building IONIC app and made a card layout as below.
<ion-content padding>
<ion-card *ngFor="let book of booksData.books; let i=index">
<ion-row>
<ion-col col-3>
<ion-avatar item-start>
<img src="/../../img/authorImage.png">
</ion-avatar>
</ion-col>
<ion-col col-7>
<ion-card-header>
#{{i+1}}
</ion-card-header>
<ion-card-content>
<p>{{book.text}}</p>
<p>{{book.person}}</p>
</ion-card-content>
</ion-col>
<ion-col col-2>
<ion-row>
<ion-icon name="thumbs-up"></ion-icon>
</ion-row>
<ion-row>
<ion-icon name="thumbs-down"></ion-icon>
</ion-row>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
The card is splitted into three columns (as expected), how ever I am facing the below issue
The thumbs up and thumbs down icon are displaying but not taking the full available height . instead they are taking a fraction area of the column only. How can I make sure that the two icons take half the width of the Row of that specific column.
Any inputs on how to fix this please.
Okay so this is how you can solve both your problems, here's the code for your page:
<ion-card *ngFor="let book of booksData.books; let i=index">
<ion-row>
<ion-col col-3>
<ion-avatar item-start>
<img src="./assets/img/authorImage.png">
</ion-avatar>
</ion-col>
<ion-col col-7>
<ion-card-header>
#{{i+1}}
</ion-card-header>
<ion-card-content>
<p>{{book.text}}</p>
<p>{{book.person}}</p>
</ion-card-content>
</ion-col>
<ion-col col-2>
<ion-icon name="thumbs-up"></ion-icon>
<ion-icon name="thumbs-down"></ion-icon>
</ion-col>
</ion-row>
</ion-card>
And this is the css for your page
.col[col-2] {
display: grid;
ion-icon {
display: flex;
font-size: 2em;
align-self: center;
justify-self: center;
}
}
Let's go through the code:
For the image you'll need to add the path relative to your index.html file, since an Ionic app is simply an SPA (Single Page App) so every page is served as it was part of your index.html. The same works for images rendered though javascript files and CSS.
For your thumbs up buttons you first need to remove the rows from the HTML, they doesn't need to be inside of a row.
Then you can manipulate it with CSS, apply a display: grid to your col element with the col-2 attribute, if you want you can change it to a class or ID and use something like <ion-col col-2 class="thumbs-col">...</ion-col> and change the CSS selector to .thumbs-col instead of .col[col-2].
The display grid is enough to separate into 2 equal rows, but if by any reason it desn't separate this way just add grid-auto-flow: row; to your col selector.
For the icon i added a code so it can center the icon both vertically and horizontally with flexbox. For the size since the icon is not an image, but an SVG, you'll need to manipulate it's size with font-size and not height/width. If you change to a button with an icon, for an example, then you can use height/width.
Hope this helps.
I am using ionic 3.
<ion-header>
<ion-navbar>
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-footer>
<ion-title>
{{ title }}
</ion-title>
</ion-footer>
What ever I put in "ion-content" there is no scroll when content overcome height of the screen.
I tried with grid in content:
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-12 class="left-col">
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
</ion-row>
</ion-grid>
Also tried with list:
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
...
</ion-list>
Nothing works. What is the catch here ?
I think this should be handled automatically by Ionic.
To enable vertical scroll to your page or any other container, there is a tag called
<ion-scroll scrollY="true">
// your content here
</ion-scroll>
To enable horizontal scroll, just change scrollY=true to scrollX=true
in your sass file add the following :
ion-scroll {
white-space: nowrap;
height: 500px;
}
The real problem is that ionic global CSS property was overridden in the project.
"scroll-content" class must not be changed in project styles.
You can use 'ion-list' property in CSS and change this:
ion-list
{
overflow-y: scroll;
};
Also, if doesn't change yet, you can put '!important' after, like this:
ion-list
{
overflow-y: scroll !important;
};
I am wanting to do a grid in ionic 3 where the width's are of equal width (50%) and the heights are dynamic like the following: http://prntscr.com/f8ftmc
However, when I try and do this I get the following: http://prntscr.com/f8fvld where all the 2nd column elements seem to have the same height as the 1st column.
This is my code for doing it atm:
<ion-grid>
<ion-row wrap align-items-stretch>
<ion-col class="no-padding" col-6 *ngFor="let x of myData; let i = index">
<ion-card>
<ion-card-content>
<ion-card-title color="secondary-dark">
{{x.title}}
</ion-card-title>
<p class="italics">
{{x.description}}
</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
How can I get it to do dynamic heights and not always the same height as the first columns - (http://prntscr.com/f8ftmc)
My ion-footer display above the ion-content Please take a look at this image.(when i have more item my view appears like this)
i need my actual view like this image .(this is the look i need)
i tried adding ion-navbar inside my ion-footer but still same result.
here is my code:
<ion-footer *ngIf="shopingCart.length > 0">
<ion-toolbar color="favorite">
<ion-row class="footer_color" >
<ion-col width-50>
Total: {{total}}
</ion-col>
<ion-col width-50 (click)="checkoutNav();">
Checkout >
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>