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>
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;
}
Related
I have following code in Ionic 3. I have yes/no type radio button which are horizontally aligned. In android they are coming in center but in iOS thery are coming as right aligned. I want to make them center aligned for iOS as well. Following is the code:
<ion-card center>
<ion-card-header >
<ion-label >Q1. Are you a programming geek?</ion-label>
</ion-card-header>
<ion-row radio-group>
<ion-col width-30>
<ion-item>
<ion-label>Yes</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
</ion-col>
<ion-col width-30>
<ion-item>
<ion-label>No</ion-label>
<ion-radio value="0"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
Following is the CSS which I have modified:
.input-wrapper{
flex: initial;
}
.card-md .item-md.item-block .item-inner {
border: 0;
justify-content: center;
}
I have done it by adding following code in css:
.card-ios .item-ios.item-block .item-inner {
border: 0;
justify-content: center;
}
I am having a little challenge trying to re-position an icon in an ion-card header to the right. Check my code samples and pictures below.
this is my code
...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span item-left>{{account.title}}</span>
<span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
but the picture below shows what i would love to achieve
I finally figured out the ultimate solution. It is just adding style="float:right;"
...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span style="color:blue">{{account.title}}</span>
<ion-icon style="float: right;" (click)="takeAction(account.$key)" name="more">
</ion-icon>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
Notice how I placed the ion-header contents into an ion-item element
You could try using ion-row and ion-col with col-{width}.
<ion-card-header>
<ion-row justify-content-between>
<ion-col col-11>
<span item-left>{{account.title}}</span>
</ion-col>
<ion-col col-1>
<span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
</ion-col>
</ion-card-header>
They are both components of ion-grid which works similar to the grid layout of bootstrap.
Use a div container and pull that div to right. HTML should look like below:
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span item-left>{{account.title}}</span>
<span item-right>
<div class="pull-right">
<ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon>
</div>
</span>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
In CSS add following:
.pull-right {
float: right;
}
You could also use the popular flexbox module. Just add the following 2 CSS properties to the parent element.
<ion-card-header>
<div style="display: flex; justify-content: space-between;">
<h1>Left Content</h1>
<ion-icon name="more"></ion-icon>
</div>
...
</ion-card-header>
Here you can find another tutorial about flexbox with a good explanation and some nice, visual appealing examples.
The snippet above results in something like this:
<ion-card>
<ion-card-header>
<ion-card-subtitle color="primary">Subtitle</ion-card-subtitle>
<ion-card-title>
Title
<ion-icon color="primary" style="float:right" name="arrow-back"></ion-icon>
</ion-card-title>
</ion-card-header>
<ion-card-content>
This is some card content
</ion-card-content>
</ion-card>
I'm trying to align menu toggle icon to left and title to center of the header. I'm using the below code:
<ion-header>
<ion-toolbar color="primary">
<button ion-button menuToggle left>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Home
</ion-title>
</ion-toolbar>
But the title doesn't appear in the centre. please help out. thanks in advance.
For android device you need to put this code
Using this code solved this issue for me.
page.html do this
<ion-header no-border-bottom>
<ion-navbar color="primary" class="home-nav">
<ion-title >Dashboard</ion-title>
<button ion-button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
app.scss file do this
ion-header button, .back-button {
position: absolute !important;
z-index: 5;
}
ion-title {
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
}
You just need to add the text-center directive to your ion-title or ion-toolbar or add class="ion-text-center"
<ion-header>
<ion-toolbar color="primary">
<button ion-button menuToggle left>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title text-center>
Home
</ion-title>
</ion-toolbar>
</ion-header>
The problem can easily be solved by taking out the button from the content flow: set it's position to absolute which leaves the title as only child in it's parent normal flow. It will take up the entire width and get properly centered.
Something like:
ion-navbar button {
position: absolute !important;
}
You need to set the button within ion-buttons start.
Try:
<ion-header>
<ion-toolbar color="primary">
<ion-buttons start><!-- here -->
<button ion-button menuToggle left>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
Toolbar docs
For ios mobile the title will automatically aligned center all you have to do is for android
<ion-header>
<ion-navbar color="primary">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
in your css do this
ion-title{
text-align: center;
}
if the above Sass is not applied the try this
ion-title.title.title-md {
text-align: center;
}
You should use left or right in ion-buttons because start and end doesnt work always
<ion-header>
<ion-toolbar color="primary">
<ion-buttons left><!-- here -->
<button ion-button menuToggle left>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
you can use css to center text please try this
html code
<ion-title text-center class="comman-title-text-right">Signup</ion-title>
add css
.comman-title-text-right{
margin-right: 60px;
}
How to add text over the image in ionic1 slides
i need to display the text over image in the ionic slide. what should be stylesheet value for the text i need to set?
here is title property.
.slide-title {
margin-top: 2.8rem;
}
and here is the image property
.slide-image {
max-height: 100%;
max-width: 100%;
margin: 18px 0;
}
and here is the code for displaying slides
<ion-slides pager>
<ion-slide *ngFor="let slide of slides">
<ion-toolbar>
<ion-buttons end>
<button ion-button color="primary">Skip</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image" width="100%" height="100%"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-slide>
<ion-slide>
<ion-toolbar>
</ion-toolbar>
<img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
<h2 class="slide-title">Ready to Play?</h2>
<button ion-button large clear icon-right color="primary">
Continue
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-slide>
</ion-slides>
</ion-content>
2 ways to do this:
Setting the image as background-url to the outermost container. And then specify the title and other things in this container.
Outermost container will have position: relative. Have your image <img/> inside this container. All other inner containers (title and etc), will have position: absolute; and then actual position accordingly. Like top: 5%; left: 5%;
I have tried both the solutions in my app in the past. Both works. Not tried with your code though. Let me know about specifics if you need.
I have a problem because I can't change the colour my ion-list.
My .html is like this:
<ion-header>
<ion-navbar>
<ion-title>
Contactos
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="telefonos" padding>
<ion-list class="MyList" >
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon name="{{item.icon}}" item-left></ion-icon>
<div align="center">
{{item.title}}
</div>
</button>
</ion-list>
</ion-content>
and my .scss in like this:
.MyList{
background-color: #58B43F;
color : #ffffff !important;
box-shadow : 0px 6px 10px #888888;
}
box-shadow work fine, but my list is still white and the letters black.
Somebody know what is the problem?
Thanks in advance.
Best regards.