Because of the title issue in ionic 2 for android. i have set some css and make centre of title.and i have put the left and right button in the nav bar. but when i apply the onclick functionality for that two button.its not working. even no console message too.
here is my code :
html :
<ion-header>
<!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
<ion-toolbar>
<ion-buttons class="loginnavbtn" (click)="goback()" left>
CANCEL
<!-- left aligned content here -->
</ion-buttons>
<ion-title>
LOGIN
</ion-title>
<ion-buttons class="loginnavbtn" (click)="loginbtntap()" right>
SAVE
<!-- left aligned content here -->
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
My css :
ion-header {
.button-md {
box-shadow: none;
}
.toolbar-title {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 15px;
font-weight: 500;
}
}
my js :
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
constructor(public navCtrl:NavController) {
}
public goback() {
this.navCtrl.pop();
}
public loginbtntap() {
this.navCtrl.pop();
}
}
My onclick is not working.what i ma doing wrong ?
Thanks !!
Here is the solution that works.
<ion-header>
<ion-navbar>
<ion-buttons *ngIf="user != null" left>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-buttons *ngIf="user == null" left>
<button ion-button (click)="loginBtnClicked()">
<ion-icon name="log-in"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons right>
<button ion-button (click)="searchClicked()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
I faced the same issue in ionic3.
Please use button tag with ion-buttons and this solution works for me.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<ion-header>
<!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
<ion-toolbar>
<button ion-buttons class="loginnavbtn" (click)="goback()" left>
CANCEL
<!-- left aligned content here -->
</button>
<ion-title>
LOGIN
</ion-title>
<button ion-buttons class="loginnavbtn" (click)="loginbtntap()" right>
SAVE
<!-- left aligned content here -->
</button>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
Try to use ion-button
<button ion-button class="loginnavbtn" (click)="goback()" left>Name of button</button>
Related
I have this kind of header in ionic 3
What I wanted to do was center the home title while ignoring the space occupied by my ion avatar
Here's what I tried
<ion-header >
<ion-navbar style="text-align: center;">
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button round clear (click)="goToAccountPage()">
<ion-item class="transparent">
<ion-avatar item-end>
<!-- <img src="{{photo_url}}"> -->
<img [src]="photo_url" >
</ion-avatar>
</ion-item>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
and this
<ion-header >
<ion-navbar>
<ion-title text-center>Home</ion-title>
<ion-buttons end>
<button ion-button round clear (click)="goToAccountPage()">
<ion-item class="transparent">
<ion-avatar item-end>
<!-- <img src="{{photo_url}}"> -->
<img [src]="photo_url" >
</ion-avatar>
</ion-item>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
And then I tried implementing it directly and not inline
<ion-title class="center">Home</ion-title>
.center{
text-align: center;
}
To those who will encounter the same problem, please go to nourza's awesome and responsive answer :)
From this
to this
5]
Try this
.center{
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
You can use the following solution to selectively center text:
{
position: absolute;
text-align: center;
width: 100%;
left: 0;
}
I am using ionic 2. And I am making the navbar as title as centre . and one left and right button with some onclick function. I got some solution that will keep the title as centre. But the left and right button are not in proper way. It's like vertical one by one. But I need horizontally. I tried lot but not able to get that?
Here's my code :
My scss :
ion-header {
.button-md {
box-shadow: none;
}
.toolbar-title {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 15px;
font-weight: 500;
}
}
my html :
<ion-header>
<ion-toolbar>
<ion-buttons >
<button ion-button class="loginnavbtn" (click)="goback()" left>Save</button>
</ion-buttons>
<ion-title>
LOGIN
</ion-title>
<ion-buttons >
<button ion-button class="loginnavbtn" (click)="goback()" right>Save</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
The output that i need:
**cancel LOGIN Save**
But the output i am getting :
I applied some css to make my button to move right, but it increasing whole navbar height .
I think you just need to add the ion-buttons start and end
<ion-buttons start>
<button ion-button class="loginnavbtn" (click)="goback()" left>Save</button>
</ion-buttons>
<ion-title>
LOGIN
</ion-title>
<ion-buttons end>
<button ion-button class="loginnavbtn" (click)="goback()" right>Save</button>
</ion-buttons>
I referred to my button to align left and right start and end key as per the above link. But i am not able to set my button as per the view in the link here is my output image
Here is my code
<ion-header class="home">
<ion-navbar primary padding>
<ion-row>
<ion-buttons start>
<button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-row>
<ion-row>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-row>
</ion-navbar>
</ion-header>
What I have tried so far is:
float: right; and float: left;
algin: right
but not able to get my button to left
You can achieve that layout by using an <ion-toolbar> to place the search bar like you can see in this plunker
<ion-header class="home">
<ion-navbar primary padding>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
<ion-toolbar primary>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
EDIT:
To hide both borders, the no-border attribute should be used on the
ion-toolbar. To hide the top or bottom border, the no-border-top and
no-border-bottom attribute should be used.
In ionic how can i put a button at some percentage from the bottom ion-content?
I've tried
<ion-view>
<ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-content>
</ion-view>
css:
.button-bottom{
position: absolute;
bottom: 30%;
}
but the button now not take the full width.
Try giving your container an explicit width:
.button-bottom{
position: absolute;
bottom: 30%;
width: 100%;
}
Add "full" variable in your button
Ex:- button class="button button-block button-energized" full >Button</button>
For more reference see Ionic Documentation on UI Components in the link below.
Ionic Full Button
Just move the button to outside of the ion-content.
Example:
Ionic 3:
<ion-view>
<ion-content>
</ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-view>
Ionic 4:
<ion-header>
<ion-toolbar>
<ion-title>Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p> your content </p>
</ion-content>
<ion-row>
<ion-col>
<ion-button>
Button Bottom (Not fixed on scroll)
</ion-button>
</ion-col>
</ion-row>
How can I align with the right side, the button is showing on the left of the header without compose icon.
Here is what I'm doing:
<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
<i class="icon ion-compose"></i>
</button>
</ion-toolbar>
Ionic 2 / Ionic 3 has something for that, just look at the following code :
<ion-header>
<ion-navbar primary>
<ion-buttons start>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
My Page
</ion-title>
<ion-buttons end>
<button (click)="myFunction()" ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The advantage of solving your problem this way is that your navbar will automatically respect the android/ios/windows guidelines. So this way you improve the quality of your app.
More informations about the guidelines :
Android :
https://developer.android.com/guide/practices/ui_guidelines/index.html
iOS :
https://developer.apple.com/ios/human-interface-guidelines/
Windows :
https://developer.microsoft.com/en-us/windows/design
ionic 4 ion-navbar is replaced by ion-back-button and in Ionic 4 back button be like
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
<ion-button slot="secondary">
<ion-icon name="search"></ion-icon>
</ion-buttons>
</ion-toolbar>
</ion-header>
You can add button in right side in header in ionic 2.0
<ion-navbar *navbar>
<ion-title>
TODO APP
</ion-title>
<ion-buttons end>
<button ><ion-icon name="home"></ion-icon></button>
</ion-buttons>
</ion-navbar>
You can add your custom icon's css class like this
css
.ion-ios-custom:before {
background-image: url("image-icon.png");
}
OR
.ion-ios-custom:before {
content: "\f439"; /* your font code */
}
OR
.ion-ios-custom:before {
content: url("image-icon.png") !important;
}
html
<ion-icon name="custom"></ion-icon>
It's work for me.
Ionic 4 - Header
<ion-header>
<ion-toolbar color="primary">
<ion-title class="titleHeader">User Detail</ion-title>
<ion-buttons slot="end">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I solved my problem with this:
ion-buttons {
order: 10
}
Try adding it to your stylesheet
Note: I used this in ionic2.
<ion-toolbar color='primary'>
<button ion-button menuToggle>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>TODO APP</ion-title>
<ion-buttons start>
<button (click)='YOUR_FUNCTION_CALL' ion-button icon-only>
<ion-icon name='YOUR_ICON_NAME'></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
Replace:
YOUR_FUNCTION_CALL with the function call you need to call when click
YOUR_ICON_NAME with icon name
for icons please visit this website http://ionicframework.com/docs/v2/ionicons/
It can be done as follow:
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-button slot="start">
<ion-icon name="search"></ion-icon>
</ion-button>
<ion-title>
utenze
</ion-title>
<ion-button slot="end">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-toolbar>
</ion-header>
<ion-view title="home" align-title="center">
<ion-nav-buttons side="right">
<button ng-click="search()" class="button button-icon icon ion-android-search"></button>
</ion-nav-buttons>
<ion-content has-bouncing="0px">
</ion-content>
</ion-view>
this should work for you ......