I am new to Ionic and i would like to remove the back button and only display the menu button on all my pages. Where can i do this?
You need to add attribute persistent="true" to ion-menu
Like that.
<ion-menu side="left" [content]="content" persistent="true"></ion-menu>
then menuToggle button will be available on all views.
You can find more details here in the docs.
For hiding back button you can try this code:
<ion-header>
<ion-navbar hideBackButton >
<ion-title>PageTitle</ion-title>
</ion-navbar>
</ion-header>
I tested in my project. It works fine.
Related
I want to use scrollToTop in my ionic project . In my code scrollToTop working but i am want to show button when scroll the content in ionic . How to show sticky button in ionic please help me...
In images my button show at end want to show at middle and show when i am scrolling..
tab1.page.html
<ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()" [scrollEvents]="true">
<button class="scroll" (click)="ScrollToTop()">
<ion-icon name="arrow-dropup-circle"></ion-icon>
</button>
</ion-content>
tab1.page.ts
ScrollToTop(){
this.content.scrollToTop(1500);
}
For the "when I'm scrolling", you can detect if your heart icon is visible in your scroll-able card with something like:
How to Check if element is visible after scrolling?
I got two menu on the header menu. A left side "Burger Menu" and a right side menu with "add" symbol. The html content for the two menu are included in a seperate side-menu.html [not on app.html]
id for the left menu is "menuLeft" and the id for right menu as "menuRight"
The Burger menu appears on the main page and upon proceeding to a child menu , its replaced with a BACK button. This is expected and I am happy with that.
The Right menu is not enabled in any of the pages. I included the below code on only one of the child menu html file where the right menu needs to be appear.
<ion-navbar>
<ion-title>{{name}}</ion-title>
<button ion-button end>
<ion-icon name="add"></ion-icon>
</button>
</ion-navbar>
In its corresponding *.ts file I enabled the right menu in the ionViewWillEnter
ionViewWillEnter() {
this.menu.enable(true, 'menuRight');
}
Now, I have two issues.
1. When I include menuToggle in the button tag, the menu disappears. But I want the menu to appear and I should have the menu Toggle feature
I am able to make the right menu appear only when menuToggle attribute not mentioned.And still, it is not appearing on the right end of the header, it appears just prior to the Title. Refer screenshot attached.
Not sure why I am getting the background for the "add" button. Can I make it transparent?
Kindly let me know if you need more info. Thanks in advance
Change your navbar to make the menu appears on the right side, and i need more information about to awnser the other questions. Where are you placing the menuToggle ?
<ion-navbar>
<ion-title>{{name}}</ion-title>
<ion-buttons right>
<button ion-button>
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
When i open my app, the 1st page which appears is Login.html , after filling the form, it navigates to dashboard.html
Problem: When it goes to Dashboard.html , it shows back arrow on the top left and not the menu icon. I want it to show menu icon here and not the back arrow
This is the code i am using for navigation in login.ts:
if(data[0].USR==1)
{
this.navCtrl.push(DashboardPage);
}
Image of dashboard.html, please notice the arrow on left side
I have to click this arrow > go back to login > then from menu icon, i open menu and select dashboard page, then i see menu icon on dashboard.. why so ?
I have also created a video , sharing its youtube link - http://youtu.be/1eA5KXJkSDE?hd=1
It's default of Ionic when you navigate using push
If you wanna show menu toggle icon, you should use setRoot
Example:
onClickNavigate() {
console.log("onNavigate");
this.navCtrl.setRoot("PageTwo")
}
in "PageTwo" html, you need to add toggle button on the header too
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>page-two</ion-title>
</ion-navbar>
</ion-header>
Seems like you want to set the DashboardPage as a root page, so instead of the push method, use setRoot:
if(data[0].USR == 1) {
this.navCtrl.setRoot(DashboardPage);
}
In my app I have at every page the "hideBackButton" on true. This works except on one page where that button appears next to the menu button (see screenshot). This back button hasn't any functionality here.
Is there a way to hide it? Perhaps by a css hack? Any help would be great.
There are pages where the back button should be visible, so I can't hide it in the entire app.
One way to hide the back button would be to set that page as the root page, instead of just pushing it. So instead of
this.navCtrl.push(ThePage)
try with
this.navCtrl.setRoot(ThePage)
That's one way to do it. If you don't want to change that, you can replace the ion-navbar for an ion-toolbar. So instead of
<ion-header>
<ion-navbar>
<ion-title>
Events Feed
</ion-title>
</ion-navbar>
</ion-header>
You can hide the back button with this:
<ion-header>
<ion-toolbar>
<ion-title>
Events Feed
</ion-title>
</ion-toolbar>
</ion-header>
I'd prefer the first fix, but I'm not sure of what are the requirements on your end.
I'm developing an ionic app on android. I'm facing a problem where back button doesn't show up when there's no page to go back.
For more detailed explanation:
Scenario 1: Button from side menu when click go to View B.
Scenario 2: Button from side menu to View A, then button from View A to View B.
Scenario 2 View B shows back button, since it has a previous page, but Scenario 1 doesn't have a previous page that's why it doesn't show the back button, How do I display the menu button if there's no back button?
Here's my code below:
<ion-view view-title="MY View">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button" type="submit"
ng-click="goEdit(data.ID)">Edit</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
Additional Info:
When removing the <ion-nav-bar> it displays the menu button, but of course will no longer show back button and edit button. When I try putting ng-hide in <ion-nav-bar ng-hide="isMenu"> it doesn't show any nav-bar since it's hidden but from html inspect element it's still there but hidden only. Any work around on this?
If you set a page as a rootPage and also use menu in you will see menu button. when navigating to another page from root if you use navCtrl.push() back button will automatically be added to the pushed view.if you set second page as a rootPage again you will see menu button again.
But if you want to implement it yourself that is another thing.
also check this link
Consider customizing the navbar/toolbar only for the pages that needs it.
By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button icon-only (click)="gotoHome()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
...
</ion-content>
The same answer applies to this topic, for reference :
Ionic Change back button icon for one page only