I added a SIDEMENU in my project as second page, and the first page is a screen only one image with a button for the second. But when I click the button, instead of showing the sidemenu button in the upper left corner, it is showing only the "back" arrow, but if I put my SIDEMENU page as the rootpage, it works perfectly. I just want to go to the second page and my sidemenu appear perfect and not like the "back" button. Please, if anyone understands me, help me: D
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> Vida carioca </ion-title>
</ion-navbar>
</ion-header>
it's this wrong
as i want
Related
I'm lost with an issue on IOS.
I'm implementing a chat, where you have a list of contacts and, when you click on one of it, it will display the list of the associated messages.
It works perfectly on android and on browser (even on IOS browser), but on IOS, when I click on a contact to display the messages, nothing happened.
My function is not called from the html, even when i tried to ad some testing buttons everywhere on my ion-content. It only works on my ion-header.
Could you please save my life ?
Here's my code :
HTML :
<ion-header>
<ion-toolbar>
<ion-buttons>
<button ion-button (click)="displayChat(undefined)">
Test (works here)
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="no-scroll" style="height: 100% !important;">
<div>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
<ion-list class="contactList">
<ion-item *ngFor="let chat of chats"
(click)="displayChat(chat)">
{{chat.contactName}}
<br>
<span class="chatDate">
{{chat.lastMessageSend}}
</span>
</ion-item>
</ion-list>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
</ion-toolbar>
</ion-footer>
TS :
displayChat(chat: Chat) {
console.log("Ok");
}
I reduced my code to be more readable.
Enjoy !
EDIT
.no-scroll .scroll-content {
overflow: hidden;
}
.chatDate {
float: right;
font-size: 0.7em;
}
It's not working in the footer either.
Ok, I figured out what the problem was.
Actually, this code was running into a Ionic Modal from a Popover.
I had to keep my Popover opened to handle some treatment with the OnDidDismiss method, but it could execute this method only if the popover is staying opened.
But, in IOS (of course), you cannot click on a modal if a Popover (or probably any another absolute element) is behind your modal.
So, to solve this issue, I created an Observable to handle the OnDidDismiss method (of the Modal), which I give as a parameter of the viewCtrl.dismiss method to get it back on the OnDidDismiss of the Popover view, and then subscribe the Observable.
Inside your button component, try adding ion-item instead of ion-button. I have a bit similar code where it is working fine.
Eg:
<button ion-item (click)="onClick()">Click me</button>
Let me know what happens after this! Will be ready to help.
I have implemented an ion-back-button into my toolbar in order to navigate back. But the button is not at its proper place and somehow displaced.
I even directly copied the code from the documentation but it still doesn't work.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I’ve set up a menu in my app.html :
<ion-menu persistent="true" id='menu' side="left" type='reveal'
[content]="mycontent">
<ion-content>
some menu content
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>
and in each page, I have a button in the navbar that opens the menu :
.html
<ion-navbar hideBackButton>
<button ion-button small (click)="openMenu()">
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
.ts
openMenu(){
this.menuCtrl.enable(true, 'menu');
this.menuCtrl.open('menu');
}
The first page that has the menu button is my home.html. The menu works perfectly fine the first time this page is visited. When I navigate to the next page, the menu works fine there as well with the menu button. But when I navigate one more page ( 2 navigations from the home page ), the menu button stops working and the menu doesn’t open. And when I navigate from this page to the home page, the menu stops working there as well, and basically stops working in all pages.
It seems like making 2 navigations from the home page causes the menu to somehow disable itself for good. What could be the reason for this and how can I fix it?
I am adding an ion-icon button to the ion-navbar in an Ionic 2 app.
It works correctly, but this solution seems rather verbose.
I would like to confirm that this is the correct/simplest-form/best-practice approach:
<ion-navbar>
<ion-title>Books</ion-title>
<ion-buttons end>
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navigation"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
I would like to confirm that this is the
correct/simplest-form/best-practice approach.
It's perfect :)
It may seems like a little verbose, but each part of the code has its purpose. The <ion-buttons end>...</ion-buttons> will act as a container, to place the button in the right place.
In this case you're using end, and as you can see in this answer:
start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first
button on the right for android.
<ion-buttons end> would be on the right for ios and the last button on
the right for android.
left/right are provide as a way to over ride that.
Then inside of that container, you just need to place the button, in this case, with an icon inside:
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navigation"></ion-icon>
</button>
I've added a side menu in my ionic 2 application that I'm developing, modifying the "super" template given by ionic. I've added the following code in app.html:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
If I swipe on the left the menu appears correctly, but the problem is that, in the header of pages, I can't see the three bars to open the menu:
From the documentation, it seems that simply adding this code to the html makes the three bars appear, but it isn't working for me. Do I have to change something in the header of all the pages? I don't know, maybe the super template itself overrides something in the header of pages, so that the bars are not showed?
You could try adding button and icon.
Like this:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>