Ion-radio in ion-item of an ion-list component

Ionic Framework ionic-v3
1

I have an UI which contains a list of items and an item in the list may or may not have a radio button in it. What I am trying to do is capture two different actions/interactions on an item when there is a radio-button available in it.

Here is the screenshot:
image

In other words, I am trying to implement following two behaviors:

  1. When there is a radio-button in the item:

    a. Just to select an an item, I want the user to “explicitly” tap on the radio-button. Nothing else should happen.

    b. To view the details of an item, I want the user to tap anywhere in the item except for the radio-button.

  2. When there is no radio-button in the item, a tap on the item will take the user to view the details of that item (i.e., same as the behavior of #1b)

I want to capture the “click” event on the ion-item as well as on the ion-radio separately.

Right now, #2 above is working. But can’t get #1 to work as I want to. When there is a radio-button in the item I am not able to separate the taps…a tap anywhere in the item gets the radio-button selected which I don’t want to happen.

Here is the code:

<ion-content >
    <ion-list radio-group>
        <ion-item *ngFor="let account of accounts" detail-push (click)="showAccountDetails(account)">
            <ion-radio item-left [value]="account.accountId" *ngIf="account.inNew == 'No'" (click)="showAlert(account.accountId)"></ion-radio>
            <ion-label >
                {{account.accountName}}
            </ion-label>
        </ion-item>
    </ion-list>

    <button block ion-button>
        Move
    </button>
</ion-content>

Any ideas on how I should implement it?

Thanks.

2

I’m not sure if this will help but it looks like the button has a class on it called item-cover. That class has a width of 100% and if you remove that, when you click on the radio button your showAlert() function is hit and when you click on the company name your showAccountDetails() function is hit.

image
Screen Shot 2017-05-18 at 10.03.06 AM.png1239×402 97 KB

3

@jblake - good catch! That must be it.

Guess, I need to learn some CSS and SCSS to change this behavior. I was hoping for a simpler solution. :slight_smile:

Tried adding an ion-row inside an ion-item then putting radio-button in one ion-col and the company name label in another ion-col. That bombed…didn’t show anything at all. :frowning:

Still hoping somebody will respond with another option as a resolution. :smiley:

4

No worries, when you created your project it should have automatically created an app.scss page. At the bottom of that page, paste the following and you should be able to click on the radio button to have showAlert() run and the company name to have showAccountDetails(account) run. If your project is set up to have a .scss file for each page, you could paste it there instead so that the change only affects that one page too.

.radio > button {
width: 0;
}

Let me know if that works for you.

5

@jblake - You sir are a Savior!!

Thank you very much!

I know I need to get into CSS/SCSS but haven’t been able to do it. Coming from Java background I think I am kind of having a mental block. :smiley:

Thanks again for your great help, very much appreciated!