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.
Related
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.
I am looking for controlls that can use the icon attribute in order to display the sap-icon://accept. Till right now i have been using button in order to display icons, but as of right now, the border that does make an button, isn't fitting for the task, as such, i am looking for a new controll, that supports icon attribute as well as onPress/onClick Events.
<Button icon="sap-icon://accept"/> //displays the accept icon, however it does an border that makes an Button.
There is sap.ui.core.Icon class for displaying icons.
It also has press event you can use to click on that icon.
<core:Icon src="sap-icon://accept" color="#8875E7" press="handlePress" />
I have cart icon, which when clicked loads the cart of the user in a Modal. However, any link or HTML form items like input or buttons that are within this modal are unusable. It can never be brought to focus nor clicked. I tried playing with CSS property z-index with no success.
Check site here.
Add any product to cart and then click bag/cart icon on the top right to see the issue.
Changing the pointer-events value in CSS solved the issue. wrapping the content part in an element with class modal-content is also fixing the issue as suggested in comments.
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).
I have a problem with the flyout generated by the Facebook Send button. After clicking the "Send" button the flyout is generated and displayed behind some elements. Obscuring the buttons in the flyout.
I read that this is because of a parent element with the overflow:hidden style. However, I cannot remove this attribute since it will mess up the rest of my sites layout.
I tried to dynamically remove the overflow:hidden attribute upon clicking the Send button (Accepting the layout mess if someone actually uses the send button). Using the following code:
FB.Event.subscribe("message.send", function(response) { //Remove the
overflow:hidden styling here });
Unfortunately this event only fires upon actually sending the flyout form, which is too late as need to take action as soon as the button is pressed that shows the flyout.
Could anyone tell me how to bind an onclick event to the "Send" button or how to reposition the flyout completely. Or perhaps there is an alternate solution I have not yet considered.
Thanks in advance
Fixed position might work for some, but for most it will mess up your layout.
What worked for me is to take off any overflow: auto higher up in your CSS.
I did that and it works great!