HTML input inside ion-checkbox

Question

I am trying to put an html input to the right of ion checkbox but it is not working.

<label>
    <ion-checkbox ng-model="mode" ng-checked="checked">
        <input type="text">
    </ion-checkbox>
</label>

However, it works if text is being inserted

<label>
    <ion-checkbox ng-model="mode" ng-checked="checked">
        Label
    </ion-checkbox>
</label>

Austin Mayer · Accepted Answer · 2016-07-15 14:14:22Z

1

Technically it is working,

First I would add a placeholder value to the input box so you can see some sort of value.

<label>
   <ion-checkbox ng-model="mode" ng-checked="checked">
      <input type="text" placeholder="Input">
   </ion-checkbox>
</label>

Now that we see the input, we can't click on it, because ionic have added a class in the background to disable all pointer events on Inputs that are inside of Checkboxes.

To fix this, we simply add this to our css.

.item-checkbox .item-content{
  pointer-events: auto;
}

answered Jul 15, 2016 at 14:14

Austin Mayer

264 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML input inside ion-checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related