Ion-input and ion-checkbox inside ion-item

Ionic Framework ionic-v3
1

Hey there
What is the correct way to implement an ion-input and an ion-checkbox inside an ion-item so that both are working?
If i add the ion-checkbox to the ion-item its not possible to click the ion-input anymore.

<ion-item>
    <ion-label fixed right>Some Lable</ion-label>
    <ion-input type="text" [(ngModel)]="model" ></ion-input>
    <ion-checkbox color="blue" item-right [(ngModel)]="modelCeck" (click)="modelCheckboxClick()"></ion-checkbox>
</ion-item>

I was able to fix it with some kind of hack on css side

.item-cover{
    left: initial;
    right: 0;
    width: 30%;
}

do you see some elegant/ better solution? (special the 30% ist not really nice
Thanks.

2

Hey @TobiasSchaeuble Found any solution for this? Looks like I’m stuck with this problem!

@max I have a made codepen for this, Please have a look at it~

http://codepen.io/marutifh/pen/egbENV?editors=0010

3

Hi, were you able to solve this?

4

AFAIK, any “solution” you find will be an unsupported kludge. Each item is designed to house only a single input.

1 Like