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;
}
Related
I have a side menu always visible in my ionic aplication, the problem is I don't know how to change the #shadow-root css, I tried a few things but still don't work.
The problem is that when I make the menu smaller and empty space is left there. I want to remove that empty space, because when the screen is bigger the empty space is even bigger.
I searched in the debug console and this is the troublesome element:
This is my code:
HTML:
<ion-split-pane contentId="side-menu" class="menu-left" when="md">
<ion-menu side="start" menuId="side-menu" contentId="side-menu" mode="md" class="menu2">
<ion-header>
<ion-toolbar>
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="none" class="menu-content">
<ion-item (click)="navigateHome()">
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Inicio</ion-label>
</ion-item>
<ion-item (click)="navigateAnimes()">
<ion-icon name="library" slot="start"></ion-icon>
<ion-label>Animes</ion-label>
</ion-item>
<ion-item (click)="navigateMine()">
<ion-icon name="bookmarks" slot="start"></ion-icon>
<ion-label>Mi lista</ion-label>
</ion-item>
<ion-item (click)="navigateSettings()">
<ion-icon name="options" slot="start"></ion-icon>
<ion-label>Ajustes</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="side-menu"></ion-router-outlet>
</ion-split-pane>
CSS:
.menu-left{
--width: 200px;
}
.menu-content {
height: 100% !important;
width: 200px;
}
Can anyone tell me how to apply my css attributes to the inner-scroll scroll-y in the shadow class please?
#phantomiam123 I updated my css class and doesn't work:
My css class now is:
.menu-left{
--width: 200px;
}
.menu-content {
height: 100% !important;
width: 200px;
}
.inner-scroll .scroll-y {
width: 200px;
}
And in the debug console:
This seems to work for me for now:
.split-pane-visible > ion-menu {
max-width: 200px!important;
}
I am using ionic angular,ion-button is not working in some parts of code,but it is working in some parts of code.The button is not getting clicked.
<div class="ion-page" id="main">
<ion-header>
<ion-toolbar>
<ion-button slot="start" expand="block" >
<ion-menu-button ></ion-menu-button>
<!-- <ion-menu-button (onclick)="gotoLogin()"></ion-menu-button> -->
</ion-button>
<ion-title>Capture Image</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-button (click)="goToProfile()">Profile Page</ion-button>
</ion-list>
</ion-content>
</div>
<ion-menu side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-button (click)="goToProfile()">Profile Page</ion-button>
<ion-button>Capture Image</ion-button>
<ion-item>Community</ion-item>
</ion-list>
</ion-content>
</ion-menu>
The button in div is not working where as button in ion-menu is working.
What is the problem with this?
You can try like this, according to https://ionicframework.com/docs/api/item
<ion-list>
<!-- Item as a Button -->
<ion-item button (click)="buttonClick()">
<ion-label>
Button Item
</ion-label>
</ion-item>
</ion-list>
I hope you can help me with this problem. Since yesterday I’ve been trying to position this green button on the right side. And things like margin don’t work:(
HTML
<ion-header>
<ion-toolbar color="rank">
<ion-searchbar (input)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list-header>
Friends
</ion-list-header>
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round>Add</button>
</ion-item>
</ion-list>
</ion-content>
Here the button
Just like you can see in the docs, you can achieve that by using the item-end attribute in the button:
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round item-end>Add</button>
</ion-item>
<!-- ... -->
</ion-list>
Use ion-item padding.
<ion-item padding>
<button default ion-button item-right color="rank" round >Add</button>
</ion-item>
You can use css as well.
I hope you made the CSS file for the above problem, so try putting the following code into it:
button {
color:green;
position:relative;
top:-43px;
left: 410px;
}
To adjust the position of the button horizontally, just adjust left position accordingly.
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 ......