I have ionic side menu that closes fine on clicking ion-item in chrome browser. But it doesn't show the same behaviour in samsung browser. It doesn't close once opened. I tried to close using code also. But it's not closing. I wrapped the ion-item in ion-menu-toggle like this
<ion-list>
<ion-menu-toggle>
<ion-item lines="none" routerLink="/home">
<ion-icon name="business" color="secondary" slot="start"></ion-icon>
<ion-label>Business</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
someone explain me the issue and help me out
you can try this code maybe it is work's for you
<ion-menu-toggle menu="first" autoHide="false">
Related
Hey guys I am currently working on a project with ionic and the menu has been giving more problems than it should.
Recently I have been trying to add the menu close attribute, but where ever I put it does not seem to matter. I have been placing it with a click action, with an ion-item prepend, and other failed attempts.
Below is a piece of my code for my app.component.html
<ion-menu contentId="potifyMenu" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Additional Resources</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-button menuClose expand="full" (click)="map_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="block" fill="outline" menuClose ion-item (click)="complete_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="full" ion-button menuClose (click)="complete_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Cmpleted Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="full" menuClose (click)="complete_go()">
<ion-icon slot="start" name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
Figured out a solution from a past post that never showed up in my million of searches.
just needed to encapusulate the button with a toggle
"<ion-menu-toggle>
<ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>
"
How to toggle Menu in Ionic 4
I have the same issue as menuClose directive work perfectly in ionic 3 to control toggle. In ionic 5 use ion-menu-toggle component to toggle menu close and open on the menu item. If you don't want to add toggle menu for menu item having submenu then don't use ion-menu-toggle component on those menu items.
Ionic 5 control menu and submenu close and dropdown
Menu Example:
I am just starting out with Ionic and am not really sure why the two icons in the top left-hand corner are stacking and staying tiny. I have read through all docs and forums, however, I haven't seemed to come across a solution. Thanks in advance.
<ion-header no-lines>
<ion-toolbar>
<ion-title>Home</ion-title>
<ion-buttons icon-left start>
<!-- Float the icon left -->
<button ion-button icon-start>
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
<ion-buttons icon-right end>
<!-- Float the icon right -->
<button ion-button icon-end>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I landed on this after copy & pasting some Ionic 3 code into my Ionic 4 project.
The best answer I can suggest is to have a look at the documentation for Ionic 4! A lot of what you've done is not Ionic 4, but Ionic 3.
Take the button docs for example: https://ionicframework.com/docs/api/button Your button won't work, because you must use something like:
<ion-button color="primary" fill="clear" expand="block" (click)="deleteRecord(i)">
<ion-icon name='trash'></ion-icon>
</ion-button>
Also, for the positioning, also look at the documentation. You should be using the slot property. for example:
<ion-chip outline="outline" color="primary" slot="start">
<ion-label> Job id : {{ interv.ts % 1000000}} </ion-label>
</ion-chip>
Note that in the two snippets above, I used different properties to determine the outline / fill. That's because the documentation told me to. So while it may not be entirely consistent, it is documented and for the most part, it works.
using ionic 3.9.2
Objective:
back button in navbar using ios-arrow-back style and "back" with translate pipe
with setBackButtonText(), manage to set back button text.
But it's tedious to do it for every page with getting reference of nav bar, set text after view init.
Any way to set back button text in template in which can set it like {{ 'back' | translate }}
How to use other icon for back button?
first try: ion-nav-back-button, prompt ion-nav-back-button not known
second try:
<ion-buttons start>
<button ion-button>
<ion-icon name="ios-arrow-back"></ion-icon>
<p>back</p>
</button>
</ion-buttons>
However, it's strange that even with start, the button is on right end.
Playground:
ionic playground
hope to see advice, thanks
Try this. Works well on android and ios
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Back</span>
</button>
<button ion-button (click)="dismiss()">
<ion-icon name="arrow-round-back" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
the code is like this:
<ion-list>
<ion-item>
<ion-label>account</ion-label>
<ion-input type="text" [(ngModel)]="username"></ion-input>
</ion-item>
<ion-item>
<ion-label>password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
<ion-item *ngIf="needIp">
<ion-label>your server ip:</ion-label>
<ion-input type="text" [(ngModel)]="serverIp"></ion-input>
</ion-item>
</ion-list>
and which is show in browser like this.
and when i set the browser toogle device toolbar with android mode, the content in ion-label did not disappear, like this.
i don't why, when i build this project with a app,the ionic app can show normally . but when i run the project with "ionic serve" command, and run it in chrome, there will is a bug in ion-label.
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 does not shows menuToggle ion-button. Please help me resolve this issue
This is the code i am using for navigation in login.ts:
if(data[0].USR==1)
{
this.navCtrl.push(DashboardPage);
}
my code in dashboard.html
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>dashboard..</ion-title>
</ion-navbar>
</ion-header>
Please help me resolve this issue
Please note:
When i normally navigate from menu to dashboard page, it shows the menu toggle button.
Would you like to try following html code for your menuToggle?
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle start>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>dashboard..</ion-title>
</ion-navbar>
</ion-header>
Also note, if there isn't any back possibility from this dashboard view to your login view, I guess you would rather like to set it as root instead of pushing it. Therefore I would suggest to modify:
this.navCtrl.push(DashboardPage);
into
this.navCtrl.setRoot(DashboardPage);