My ionic-title seems to be limited by my ionic-back-button [as can be seen here] https://i.stack.imgur.com/ZrfeL.png.
I cannot find a way to change this. I want the title to be lager than the button itself. Here is my HTML code
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="" defaultHref="/" style='color:white'></ion-back-button>
</ion-buttons>
<ion-title>
Upload
</ion-title>
</ion-toolbar>
</ion-header>
And my global.css
ion-title {
--color: white;
font-weight:bold;
font-size:4vh;
padding:0;}
ion-toolbar{
--background: #228B22;
--min-height:16vh;
padding:0;}
Related
I need to remove hamburger default icon menu on ionic menu. I've added custom menu and I need to remove default icon.
So my code:
<ion-menu side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
My layout menu:
Html button code:
<ion-header _ngcontent-yjt-c1="" role="banner" class="ios header-ios hydrated">
<ion-toolbar _ngcontent-yjt-c1="" class="ios hydrated">
<ion-buttons _ngcontent-yjt-c1="" slot="start" class="buttons-first-slot sc-ion-buttons-ios-h sc-ion-buttons-ios-s ios hydrated">
<ion-menu-button _ngcontent-yjt-c1="" class="hydrated ios button ion-activatable ion-focusable"></ion-menu-button>
</ion-buttons>
<ion-title _ngcontent-yjt-c1="" class="ios title-ios hydrated"></ion-title>
</ion-toolbar>
</ion-header>
I need to remove default icon inside circle. How to do to remove?
Can you please try the following css rules?
Can you please check if they don't work if they get added to the css of the page you are viewing?
ion-menu-button {
display: none !important;
}
or
ion-buttons {
display: none !important;
}
or
.button.ion-activatable.ion-focusable {
display: none !important;
}
Add the below styles in your app.scss file to hide the default menu button
.bar-button-menutoggle {
display: none !important;
}
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>
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.
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 ......