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)
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 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>
I want to center the ionic button inside the column.Please help me in doing this.
<ion-grid>
<ion-row>
<ion-col size="6" ><ion-button >Button 1</ion-button>
</ion-col >
<ion-col size="6" > <ion-button> button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
Now the button 1 is towards right. and button 2 is towards left
The expected result is button is in center in each column.
The expected output is as follows
..............................................................................
. button1 . button2
. .
. .
. .
. .
.
..............................................................................
When i applied some styles and examined i found it like this
<ion-grid style="background-color:red">
<ion-row style="background-color:blue;">
<ion-col size="6" style="background-color:green;" class="ion-text-center">
<ion-button>Button 1</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button> button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
The image to be like this..
Why is the grid not occupying the full browser area.
You can do like this:
Solution-1:
<ion-grid>
<ion-row>
<ion-col size="6" class="button1">
<ion-button>Button 1</ion-button>
</ion-col>
<ion-col size="6" class="button2">
<ion-button> button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
.button1 {
text-align: center;
}
.button2 {
text-align: center;
}
Solution-2:
<ion-grid>
<ion-row>
<ion-col size="6" class="ion-text-center">
<ion-button>Button 1</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button> button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
Let me know if it is won't work.
Ionic has a range of helper classes for formatting the content. In your case I think this should work:
<ion-grid>
<ion-row>
<ion-col size="6" class="ion-text-center">
<ion-button>Button 1</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button>Button 2</ion-button>
</ion-col>
</ion-row>
</ion-grid>
If that doesn't work then I would investigate the flex classes. You can see them all here:
CSS Utilities - Ionic Documentation
Update
Based on your updated feedback it seems the problem is actually with your ion-grid not the buttons or cols. As per the responsive grid documentation:
Grids take up the full width of their container, but adding the fixed attribute will specify the width per screen size.
So changing your ion-grid to:
<ion-grid fixed>
Might improve things but it does not explain why you are experiencing this in the first place.
Please use the devtools and inspect the ion-grid to see what styles are affecting it.
Did you start your project with the standard cli tooling? (If not you might be missing stylesheets) -- from the css utilities docs:
If your app was not started using an available Ionic Framework starter, the stylesheets listed in the optional section of the global stylesheets will need to be included in order for these styles to work.
Did you start the page with a normal layout? I don't see a header so is your page content in an ion-content? Don't know how this will affect things without testing but just trying to get to the bottom of why you are not getting the normal Ionic experience...
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 have two column in grid ionic with different size :
<ion-row>
<ion-col size="7">
<div>
1 of 2
</div>
</ion-col>
<ion-col size="5">
<div>
2 of 2
</div>
</ion-col>
</ion-row>
if handphone size show column number two only, if pad's size show two column.
how to do that?
If you don't specify the number of the columns it will take whatever is left on the screen. class="ion-hide-sm-up" will hide element that is bigger than mobile device.
<ion-row>
<ion-col size="7" class="ion-hide-sm-up">
<div>
1 of 2
</div>
</ion-col>
<ion-col>
<div>
2 of 2
</div>
</ion-col>
</ion-row>
Instead of sm in the class you can use md, lg, xl and instead of up you can use down depending on your needs.
You can use Media Querys: https://www.w3schools.com/css/css_rwd_mediaqueries.asp - like that you can apply styles for device sizes, specified by you.