I need your help. I recently started teaching Ionic, later I ran into a small problem. I use a bottom tab template for the menu. The problem is that in the ion-header I have an ion-back-button. This button works fine, but unfortunately, when you reload the page in the browser, this button disappears. How to make sure that the knpoka does not disappear? Thank you
<ion-header *ngIf="fullBox">
<ion-toolbar>
<ion-title>Details №{{fullBox.id}}</ion-title>
<ion-back-button slot="start" (click)="goBack()"></ion-back-button>
</ion-toolbar>
</ion-header>
goBack() {
this.router.navigate(['']);
}
The functionality of ion-back-button is based on the app's history. When you refresh as #NajamUsSaqib says your history is lost.
I can see you are giving some funcionality to ion-back-button with (click) attribute, but is not necesary for this component because that it's the main functionality of the button.
For your problem, you can replace the ion-back-button with a simple button and maintain the click method you are using. This should show always the button regardless of app's history.
Regards.
Related
I am creating a simple dashboard in ionic that consists of a toolbar at the top and a collapsible menu (navigation bar)on the left side. The menu is toggled by the menu button in the toolbar, but clicking the standalone 'div' component is also causing the menu to hide.
<ion-content>
<ion-menu type="push" menuId="nav-menu">
// create menu items
</ion-menu>
<div main>
hello world
</div>
</ion-content>
I expect the menu to remain open/unchanged when clicking on the hello world.
This is the normal behaviour and not configurable:
ionic/menu.tsx at master · ionic-team/ionic
I think you should maybe explore split-pane if you want to keep the menu open:
ion-split-pane - Ionic Documentation
But even then I think you will need to add your own toggle button to all the "desktop" menu to be optionally collapsed.
This tutorial shows how to set it up with a menu in Angular:
Split Pane in Ionic ← Alligator.io
And I think this bit is where you would need to add your own toggle code:
<ion-split-pane [when]="checkSize()">
<!-- ... -->
</ion-split-pane>
The tutorial is giving you it from the point of view of size changes, but I think you could wire this into a toggled bool from your own menu button?
I noticed a small issue with trying to open a modal from within a popover. in iOS on both my iPhone 6S Plus as well as the emulators, when I open these modals, the DOM becomes non-responsive. Text areas refuse to be clicked into, buttons won’t run functions when tapped. Buttons in the <ion-navbar> will work. Text inputs or textareas in the <ion-navbar> WON’T work.
Then, of course, in my <ion-content>, nothing will work, buttons, text areas, anything with a (tap) or (click). Has anyone else had this issue?
I should note that when I’m trying to open the modal from a page or other component, it doesn’t have this issue, ONLY when opened from a popover. Is this a bug within Ionic or could I be doing something wrong? No error shows up in my console for any of this. I could post some of my code, but the code is pretty much identical between opening the modal from the popover vs opening the modal from a regular page or component.
Thanks in advance, this is really weird :D
Adding this to app.scss solved the problem in iOS. I haven't seen any issues arise from doing this:
.disable-scroll .ion-page {
pointer-events: auto;
}
My quick fix for this issue is similar to #StevieStar solution, but I applied it to the opener classes for both Popovers and modals as it can happen with either kind of window because they are all kept in the same modalStack
In your custom css file
.modal-open{ pointer-events: all ; }
.popover-open { pointer-events: all ; }
This fix does not override a modal's or popover's behavior when backdropClickToClose:false is set either. The surroundiung area is still not clickable.
Continuous clicking on ion-icon does call decrementQty() method multiple times on IOS while it is working on Android.
<ion-icon qty-icons name="remove" (click)="decrementQty()">
Problem: If I click multiple times on the icon-icon, decrementQty() does not get called.
Expected: decrementQty() should be called multiple times with click events as on Android.
how can I achieve the same on IOS?
There are 2 possible issues:
If you add the click handler directly to the ion-icon element, the hitbox could be only the actual icon itself, which makes it hard to click. The easiest way to solve this would be to wrap it in a button.
IOS has a click delay of 300ms on every element except a few (<a> and <button> elements, maybe more). Ionic provides a directive called tappable to remove this delay. <ion-icon tappable qty-icons name="remove" (click)="decrementQty()">
All in all my suggestion would be to wrap the icon in a button and add the click handler there.
I have a simple app which always starts up a dashboard. This is the initial page where the user has an overview over the current state.
From there he navigates to modules using direct links on the dashboard itself or the given side menu.
In every module there should be a back-button visible to reach the dashboard. Whenever the user navigates from Module A to Module B (using the side-menu, which is always available!) the back-button should not navigate back to Module A, it should target the dashboard...
Here a sketch how it should be:
Red: Expected back navigation from view
Blue: Possible navigation on
screen
Blue (dotted): Possible Navigation using the side menu
Is there any way to archive this?
Yes it's possible. The easiest way to achieve this is to just forget (disable) the Ionic default back button and place one of your own in there. Have a abstract controller for the whole app or make your own for the header or where ever you would like the back button to be (a place where to place the controller code). For example:
HTML:
<button class="button button-clear header-item" ng-click="goToDashboard()">
<i class="icon ion-android-arrow-back"></i>
</button>
Controller:
$scope.goToDashboard = function() {
$state.go('dashboard');
};
Here is a simple Codepen about the solution: https://codepen.io/thepio/pen/GqvvjA?editors=1010
In this example you can just navigate to different tabs through the content and then navigate back to dashboard with the arrow on the left top corner.
Inside my Ionic application, Let's say I have an ion-list with some ion-items inside like this:
<ion-list>
<ion-item>
I love kittens!
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive">Edit</ion-option-button>
</ion-item>
// Some other items in the list
</ion-list>
I want to programmatically (e.g click of a button), open up the option menu on all the items. Same effect as if the user has swiped all the items to the left simultaneously.
I was not able to find any documentation on this. How can I achieve that?
I know it's pretty late but it's for someone who wants to do that same.
This not an actual solution but a direction to get it done.
You need to find out the call ionic gives on left/right swipe of item and just call that method from your code(off course after adding required dependencies).