Buttons and inputs inside <ion-item>

Ionic Framework ionic-v3
1

I am creating some add to cart functionality that looks like this:

add1

This all works great in the browser but not on a device (iOS or Android). Specifically, the decrement button does not work. Clicking it actually pops the keyboard for the input that is just to the right of it (where the number is). The other weird thing I’ve noticed is if I tap somewhere that’s not the input or button, it still pops the keyboard as if I was clicking on the input. Moving the decrement button next to the increment so both are to the right of the input works but looks bad. I’m pretty sure it has something to do with the item attributes but I can’t figure out what. I’ve tried so many different combinations of item-start, item-content and item-end but it never works. I’d rather not do it without using ion-item as I like the look and feel of it.

HTML is as follows

<ion-item no-lines>
   <button ion-button>-</button>
   <ion-input type="number" text-center></ion-input>                   
   <button ion-button>+</button>
   <button ion-button>Add to cart</button>
</ion-item>

What’s the ideal attribute combination for this type of layout? I’ve tried so many combinations but I can never get that decrement button to work on the left side. Any help is greatly appreciated as this has been driving me up the wall. Thanks!

2

So if I got your problem, as you have a input inside your it should open the keyboard, if you click at any point of your

I made other option for your implementation, assuming that you will use a function for minus button, plus button and “add cart” button, and instead of using just use a

tag or that show a variable called number declared in your .ts

<ion-item no-lines>
   <button ion-button (click)="minus()">-</button>
   <p>{{number}}</p>                   
   <button ion-button (click)="plus()">+</button>
   <button ion-button (click)="addCart()">Add to cart</button>
</ion-item>

Sorry for my bad english

1 Like
3

I should have clarified. The code I posted was a slimmed down version. I still need an input in there so the user can either enter a quantity or use the selectors. I ended up just writing it outside of an ion-item and that took care of all the wonkiness.

1 Like