Menu
How to craete footer on ion-card. Tried these example as below but not working.please help
.Html
<ion-card class="dashboardgraph">
<ion-card-header class="cardheader">
CNC 10
</ion-card-header>
<ion-footer class="cardfooter">
footer here ///
</ion-footer>
</ion-card>
353
The main class for Ionic footers is bar (the same as header). When you want to add footer to your screens, you need to add bar-footer class to your element after the main bar class.
Cards are a standard piece of UI that serves as an entry point to more detailed information. A card can be a single component, but is often made up of some header, title, subtitle, and content. ion-card is broken up into several sub-components to reflect this.
Card header is created with ion-card-header UI component and It is needed to declare to insert the Header in card. Here is simple example of card headers. Define the HTML img tag inside the ion-card tag to show the image in the card. Add the ion-footer inside the ion-card, It shows the extra meta information in the bottom of the card.
A card shows data in a more organized manner. Cards are handy and better from the user experience perspective to display more information on a small screen at once. One of the best things which i like most about Ionic is that it offers tons of UI components to create a beautiful layout for a hybrid mobile application.
You need to use ion-col and ion-row in ion-card.It works.
<ion-content fullscreen>
<ion-card>
<ion-card-header class="cardheader">
CNC 10
</ion-card-header>
<ion-card-content>
Content of the card
</ion-card-content>
<ion-row class="cardfooter">
<ion-col>
<p>Footer goes here </p>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
Using and completing the other answer: https://stackoverflow.com/a/47975359/4280561
Here goes the all code:
the HTML :
<ion-card class="has-card-footer">
<ion-card-header>
CNC 10
</ion-card-header>
<ion-row class="card-footer">
<ion-col>
<p>Footer goes here </p>
</ion-col>
</ion-row>
</ion-card>
and the CSS :
.card-footer {
position: absolute;
bottom: 0;
width: 100%;
}
.has-card-footer {
padding-bottom: 15px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
