Ion-checkbox with an external link

ionic-v1
1

Hi everyone

I’m trying to make a checkbox that have both the checked property (when the circle is clicked) and a link to a pdf (terms and agreements) something like this: http://codepen.io/drodrigo/pen/PqbGEQ

The problem is that ion-checkbox is clickable in the entire row so I can’t click on the text (to open the pdf).

What I did is simply remove the text inside the ion-checkbox, resize the checkbox’s width and align both checkbox and text side by side, but it feels like a ugly hack…

Is there a smarter way to accomplish this?

Thanks!

2

You can use the pure CSS checkboxes and modify the checkbox:

<div class="item item-checkbox">
  <label class="checkbox">
    <input type="checkbox">
  </label>
  <a href="http://www.google.com" target="_blank">My external link </a>
</div>

CSS:

.item-checkbox .checkbox {
  right: auto !important;
}

Codepen example: http://codepen.io/brandyshea/pen/eNBXRV

2 Likes
3

I can’t believe that the solution was that simple, thanks A LOT @brandyshea !

1 Like
4

It’s not working on device… (Android). When I tap on the link, the checkbox becomes checked and that’s all

5 
<ion-item no-lines  no-padding class="custom-checkbox">
  <ion-label>I agree <a (click)="openTerms()">Terms and Conditions</a></ion-label>
  <ion-checkbox name="agree" [(ngModel)]="user.agree" #agree="ngModel" checked="true" required></ion-checkbox>
</ion-item>

.custom-checkbox {    
  .item-cover {
    width: 10%;
  }
}
2 Likes
6

Simple and clear solution Sambath - thanks!

7

Thank you @sambath, works for me!

$ ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.1.0
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : none
    Ionic Framework                 : ionic-angular 2.3.0

System:

    Node       : v6.9.5
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    npm        : 5.0.3