When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
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
I am trying to have a ion-header where one icon is on left and another on right. my code looks like below
<ion-header>
<ion-navbar>
<ion-buttons icon-start>
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>about</ion-title>
<ion-buttons icon-end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
but what is hapenning is that i see it coming in 3 different rows.
ok, you need remove the first <ion-buttons> and leave only <button> and on the second tag of <ion-buttons> change icon-end to end.
and it should work!!
Welcome to StackOverflow!
Since Ionic applies the android/ios standards based on the current platform where the app is running, you need to understand the meaning of the following attributes: start, end, left and right.
About end/start/left/right
Using the start attribute in the ion-buttons doesn't mean it will be placed to the left, since 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.
And <ion-buttons end> would be on the right for ios and the last button on the right for android.
So with both start or end the button will be placed at the right on Android.
If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that. It's easier to see with a few examples, so please take a look at the following examples.
Example 1: Using start and end
<ion-header>
<ion-navbar>
<ion-buttons start> <!-- Here we use start -->
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons end> <!-- Here we use end -->
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The result is:
iOS
Android
Example 2: Using left and right
<ion-header>
<ion-navbar>
<ion-buttons left> <!-- Here we use left -->
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons right> <!-- Here we use right -->
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The result is:
iOS
Android
On my homepage I have a set of tabs. When I click on the + icon, a new page (AddReportPage) is being pushed (this.navCtrl.push(AddReportPage)).
On this new page I want to display a new set of tabs with different icons and different functions(see image 2).
But when I use the ion-tabs, they're not being displayed...
These tabs have to execute functions with ionSelect.
Do you have a solution?
1.
2.
You could try to use the tabsHideOnSubPages property in your tab tag: Ionic Docs - Tab.
<ion-tabs>
<ion-tab tabsHideOnSubPages="true" [root]="AddReportPage"></ion-tab>
</ion-tabs>
Then in your pushed page you'll be able to see the tabs from there.
I managed to get pretty much the same result with an ion-toolbar in a ion-footer.
Thanks for the help!
<ion-footer>
<ion-toolbar>
<ion-row>
<ion-col no-padding>
<button ion-button icon-only clear (click)="getPicture()">
<ion-icon name="images"></ion-icon>
</button>
</ion-col>
<ion-col no-padding>
<button ion-button icon-only clear (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</button>
</ion-col>
<ion-col no-padding>
<button ion-button icon-only clear>
<ion-icon name="paper-plane"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
Added three icons on my ionic home.html using the below code. Problem is they are looking very dis-aligned and very small in size on IOS.
<ion-header>
<ion-navbar color="headercolor" style="height:25px;">
<ion-title style="text-align:center;font-size:11px;margin-top:20px;">Tags</ion-title>
<button ion-button (click)="back()" style="background-color:transparent;margin-top:-50px;">
<ion-icon name="arrow-back" class="icon" style="color: #ffffff;font-size:20px;"></ion-icon>
</button>
<ion-buttons end>
<button ion-button icon-only (click)="home()">
<ion-icon name="home" class="icon" style="font-size:16px;"></ion-icon>
</button>
<button ion-button icon-only (click)="mailto()">
<ion-icon name="mail" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
</button>
<button ion-button icon-only (click)="msg()">
<ion-icon name="chatboxes" class="icon" style="color: #ffffff;font-size:17px;" ></ion-icon>
</button>
<button ion-button icon-only (click)="close()">
<ion-icon name="close" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
What is the problem in my code and how can I fix this?
Below first screenshot is of Android and second screenshot is of iOS.
Android screenshot
iOS screenshot
this is the default icon for ios and android, so if you want to use same icon for both platform then use this: md-arrow-round-back
Now Android back button will be used for both platforms.
In the Android back button you can see a border. It can be removed by box-shadow:none.
For Alignment use <ion-row> -> all elements will be aligned
To increase the icon size use font-size property in the icon tag. The icon size will be increased too.
I am working on an ionic project that has several pages out of which some pages have the back arrow that takes to the previous page however this does not seems to work fine on the rest of pages. I believe that the back arrow is default as i have implemented same header code for both the pages but one of them has the back arrow displayed but another does not has.
Page 1 header code // This has the back arrow
<ion-header>
<ion-navbar color="primary" primary>
<ion-title>Product Detail</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="cart()">
<ion-icon name="cart"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Page 2 // No back arrow displayed
<ion-header>
<ion-navbar color="primary" primary>
<ion-title>Shop Single</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="cart()">
<ion-icon name="cart"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Also the .ts files for the same too do not seem to have much difference.