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>
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.
In the app, the buttons under Edit column don't show vertically aligned with the other columns. It is always aligned at bottom which makes the row look bad.
The code is given below:
<ion-row>
<ion-col col-3> {{item.projectname}} </ion-col>
<ion-col col-4> {{item.loginid}} </ion-col>
<ion-col col-3> {{item.password}} </ion-col>
<ion-col col-2>
<button ion-button menuToggle strong *ngIf="buttonclicked"
(click)="editdata(item)"><ion-icon name="menu"></ion-icon>
</button>
</ion-col>
</ion-row>
Please guide in this regard.
Try adding this CSS to your component:
ion-col {
display: flex;
align-content: center;
align-items: center;
}
If i understand correctly this will solve your issue by vertical aligning the text. (since the button is already centered)
P.S You should make a class for this so it does not affect every ion-col in your component!