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.
Related
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;
}
I am trying to do an intro for an app with < ion-slides page>, my problem comes to set an image as background, I am trying to do this on my HTML:
<ion-header>
<ion-navbar>
<ion-title>Intro</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-slides pager>
<ion-slide style="background-image: url(/../../www/img/fondo.png)">
<h2>Slide 1</h2>
</ion-slide>
<ion-slide style="background-color: mediumpurple">
<h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: mediumpurple">
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
As it can be seen, the first slide should show the image, but what I get is this:
Thanks for helping!
Your background image path is incorrect.
The image should be saved in /src/assets/img/fondo.png.
This is copied to /www/assets/img/fondo.png during the build process.
Your html code will have :
<ion-slide style="background-image: url(../assets/img/fondo.png)">
For those using Ionic 2+ I think this syntax is what you're looking for:
<ion-slide *ngFor="let imgFile of imgList" [style.backgroundImage]="'url(../assets/image/' + imgFile)">
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 am working on Ionic v2 and and facing issue in aligning ion-label value to the right. Following is the code snippet:
Html Code:
<ion-content padding class="home">
<ion-list>
<ion-item class="clearme">
<ion-label>Employee Name:</ion-label>
<ion-label class="alignme">Gaurav</ion-label>
</ion-item>
</ion-list>
CSS:
.home {
background-color: red;
}
.alignme {
float:right !important;
}
.clearme {
clear: both !important;
}
After adding these classes text is not getting aligned to right.
You can also use text-right attribute directive like below.
<ion-label text-right>Gaurav</ion-label>
For detail information about attribute directives, see here
Edit for Ionic 5
<ion-label class="ion-text-right">...</ion-label>
Just use text-align instead of float.
.alignme {
text-align: right;
}
Btw you should use ion-label only with forms - ion-input, ion-checkbox etc.
Ionic has a built-in solution for this:
Documenation
Version 2-3:
<ion-label ion-text-center>
Centered text
</ion-label>
Version 4+:
<ion-label class="ion-text-center">
Centered text
</ion-label>
If still not success try this
//html
<ion-item>
<ion-input type="text" placeholder="Username"></ion-input>
<ion-label class="alignme">
<ion-icon name="logo-playstation"></ion-icon>
</ion-label>
</ion-item>
//css
.alignme{
position:absolute;
right:0
}
in ionic 5 this worked for me.
<ion-item>
<ion-label slot="start">Left Side</ion-label>
<ion-label slot="end">Right Side</ion-label>
</ion-item>