Ionic V4 Checkbox and Select in same ion-item

Ionic Framework ionic-v3
1

I would like to use both a checkbox and a select box in the ion-item tag. (see image below) It all aligns well, but the ‘clickable’ area for the select box takes up the whole ion-item space, so you cannot check/uncheck the check box.

If you disable the select box, then you can check/uncheck the checkbox no problem, but obviously, this is not completely serviceable.

image

Anyone have any suggestions on how I can make this work?

2 
<ion-item>
    <ion-checkbox mode="md" slot="start"></ion-checkbox>
    <ion-label>Some Text</ion-label>
     <ion-select slot="end" value="25" okText="Okay" cancelText="Cancel" >
      <ion-select-option value="25">25%</ion-select-option>
      <ion-select-option value="30">30%</ion-select-option>
      <ion-select-option value="35">35%</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>
3

I think you might be SOL. Both these controls create a shadow-root full width button.

Placing the controls within a grid/row/col construct seems to upset them, and they no longer display correctly?

Creating two items and fiddling with the css might get you there???

                <ion-item class="inline">
                  <ion-checkbox mode="md" slot="start"></ion-checkbox>
                  <ion-label>Some Text</ion-label>
                </ion-item>
                <ion-item class="inline floatright">
                  <ion-select slot="end" value="25" okText="Okay" cancelText="Cancel">
                    <ion-select-option value="25">25%</ion-select-option>
                    <ion-select-option value="30">30%</ion-select-option>
                    <ion-select-option value="35">35%</ion-select-option>
                  </ion-select>
                </ion-item>
1 Like