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?
Related
I have a bootstrap dropdown menu. When I choose an item from the dropdown menu, the text of the button is changed to the text value of the choosen item (implemented by the help of this answer: https://stackoverflow.com/a/60029507/7061548).
I have to reload the window whenever an item from the dropdown menu has been chosen because I update the sessionstorage. This works fine after page reload. But I have a problem before reload. As soon as I click on an item from the dropdown menu, the menu button becomes fully green and the button text disappears just before the page is reloaded.
I found out that if I remove the class "btn-outline-success" from the button the problem seems to be gone. I have tried to apply css styles on various elements but didn't succeed in solving the problem.
Here is my code:
HTML:
<div class="m-dropdown">
<button type="button" class="btn btn-outline-succes m-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
{{selectedColor}}
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" (click)="setColorGreen('Green')">Green</a>
<a class="dropdown-item" href="#" (click)="setColorBlue('Blue')">Blue</a>
</div>
</div>
TS:
...
selectedColor: string;
ngOnInit() {
this.selectedColor = "Green";
}
setColorGreen(color: string) {
this.selectedColor = "Green";
...
window.location.reload();
}
setColorBlue(color: string) {
this.selectedColor = "Blue";
...
window.location.reload();
}
...
As soon as I click on an item from the dropdown menu, the menu button becomes fully green and the button text disappears just before the page is reloaded.
When you click the button Bootstrap fires some JS to trigger the dropdown.
It's using the .dropdown-toggle class and the data-toggle="dropdown":
<button type="button" class="btn btn-outline-succes m-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
I'm guessing that Bootstrap is marking the button as disabled so it can prevent double-clicks. And I'm guessing that the style change you're seeing is a result of some class changes that Bootstrap is making in JS as part of the button's click function.
If you have any defined CSS on the button, it could be conflicting with what Bootstrap is trying to do.
See the effect of clicking on a button on Bootstrap's docs page. Does your change look at all familiar?
You can further test this in Chrome DevTools by looking at what fires when you click the button. Then put a breakpoint there and click the button.
Or you can use DevTools to force element state on the button to see what happens in different states (:active, :hover, etc).
I've created a tabs based app with the command.
ionic start myApp tabs
The idea is to add different side menus for each tab pages, trying to do a master detail navigation, using the side menu as master elements list and the tab pages to show detailed content.
The app.component.html file looks like this:
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
tab1.page.html like code:
<ion-menu contentId="aside1" side="start">
<ion-content>
<ion-list>
<ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="aside1" main></ion-router-outlet>
tab2.page.html code:
<ion-menu contentId="aside2" side="start">
<ion-content>
<ion-list>
<ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="aside2" main></ion-router-outlet>
Both menus aside1 and aside2 works when I swipe and show the individual strings array elements at the first look of tabs.
The problem is when I go back to previous tab, instead of show again aside1 side menu, this stop working and what the swipe gesture really does is show the side menu of the other tab.
I don't know if I need a particular code in tab1.page.ts and tab2.page.ts to make this work.
The problem was that I haven't specify the menuId in each side menu.
I do not delete the question in case someone finds it interesting to create different menus for each page
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
I want to add href to navigation bar buttons like we do for the ion-item.
For example:
<ion-list>
<ion-item menu-close href="#/app/home">
Dashboard
</ion-item>
<ion-item menu-close href="#/app/aboutus">
About Us
</ion-item>
</ion-list>
I want exactly this to happen for navigation buttons. But I couldn't find a href thing for button.
I tried both $state.go('app.home') and $window.location.href = '#/app/home'; for the button and both works. But it hides the menu button in the navigation bar with a back button. I do not want it to be happen like that. I want the menu button there. Like when we click the 'dashboard' in the menu.
Any help will be appreciated.
I got the answer for this.
In the ion-side-menus tag, write enable-menu-with-back-views attribute value to 'true', which is 'false' by default.
Eg:
enable-menu-with-back-views="true"
As per my knowledge you can not use "href" tag for <ion-item>. <ion-item> tag is only used under <ion-list>
It seems you are trying to make tabs. If it is correct you can create tab view project of ionic using following command.
"ionic start myApp tabs"
I'm working on a simple apple tv application using the atvjs framework, however I am running into difficulties with the menu bar.
Does anyone know if it is possible to retain the top menu bar when navigating between pages with the 'data-href-page' attribute?
The sample code below will correctly navigate to and render the page but the menu bar is gone and requires the user to back out instead.
<document>
<alertTemplate>
<title>Example for creating links to other pages</title>
<description>Select an option</description>
<button data-href-page="homepage">
<text>Go To Homepage</text>
</button>
<button data-href-page="login" data-href-page-options='{"username": "emadalam", "password": "123456"}'>
<text>Login</text>
</button>
</alertTemplate>