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;
}
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'm very new in Ionic2 or Ionic at all. I set up a new project and want to design a small menu at the bottom of the foot of my page. I didn't do anything else on this project and trying to imitate the steps of a tutorial video. but when I use the icon-only directive on a button the background of the button only becomes a bit smaller. The background doesn't disappear.
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-only>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="add"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
Here's my code. I hope you can help me.
For Ionic 4 - <ion-button fill="clear">
You can use the fill property now, e.g:
<ion-button (click)="onClick()" fill="clear">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
Adding a clear attribute should give the result you want if i understand correctly:
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-only clear>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-only clear>
<ion-icon name="add"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
For Ionic 4:
...
<ion-button (click)="onClick()">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
...
You can go to this link for more references https://ionicframework.com/docs/api/button
ionic 4 :
<ion-button (click)="onClick()" fill="clear">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
I would like to create tabs like these on a page:
As you see Voortgang and pijnniveau are my tabs in the page itself but if I set them like this:
export class ProgressPage {
tab1Root = HomePage;
tab2Root = SchemaPage;
and than in my html template do this:
<ion-header>
<ion-navbar color="light">
<ion-title>{{viewTitle}}</ion-title>
<ion-buttons end>
<button ion-button [disabled]="isToday" (click)="today()">Today</button>
<button ion-button (click)="changeMode('month')">M</button>
<button ion-button (click)="changeMode('week')">W</button>
<!--<button ion-button (click)="changeMode('day')">D</button>-->
<button ion-button (click)="loadEvents()">Load Events</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<!--<template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"></template>-->
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>
<ion-list inset>
<ion-list-header>{{ viewTitle }}</ion-list-header>
<ion-item>
<h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
<p>Fysiotherapie afsrpaak</p>
</ion-item>
<ion-item>
<h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
<p>Fysiotherapie afsrpaak</p>
</ion-item>
</ion-list>
</ion-content>
<ion-tabs color="light" tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Missies"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Beloningen"></ion-tab>
</ion-tabs>
But this will looks like this, you see the tabRoot pages under the active page:
How can I fix this?
Kindly go to your app.componet.ts file and set the rootPage to ProgressPage. (If this is the opening screen of your app)
If you are using a login screen or if you are navigating from another screen to this screen, then ensure that you are pushing the ProgressPage in the navCtrl.
Hope this helps you. Thanks.
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.