Checkbox in ion-navbar

Ionic Framework ionic-v3
1

I have to put a ion-checkbox in an ion-navbar (Don’t ask…). Of course the Ionic styles are not prepared for such madness. Anybody already done something so terrible and can share some CSS that fixes the positioning (and all the other unknown things breaking) a bit?

(I tried wrapping the ion-checkbox in ion-button which gives it the correct positioning of a button, but also disabled the “check/uncheck” functionality by hijacking the click with a invisible div or something - also ion-checkbox is a button itself inside, so this is super ugly on the generated code…)

2

The answer is something like that:

    <ion-buttons end>
      <ion-checkbox class="bar-button" style="margin-right:10px;" item-end [(ngModel)]="pepperoni"></ion-checkbox>
    </ion-buttons>

Adding the class bar-button make the positioning bearable, the added margin-right gives it some space to breath that it would normally get by being a real button.

The tappable area is still crap, but that’s for another time…

3

Hey Sujan, I’d rather not use inline css here and the bar-button class ain’t doing anything for me. The following works fine at my end:

<ion-navbar>
  <ion-title>Home</ion-title>
  <ion-buttons right>
    <ion-checkbox margin-right></ion-checkbox>
  </ion-buttons>
</ion-navbar>
4

basically fine, but better use margin-end so this is RTL compatible.

The bar-button gives a few px margin to top that aligns the checkbox with eventual buttons.

1 Like