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

**URL:** <https://forum.ionicframework.com/t/ion-radio-in-ion-item-of-an-ion-list-component/90851>\
**Category:** ionic-v3\
**Created:** [May 18, 2017, 3:41pm UTC](https://forum.ionicframework.com/t/ion-radio-in-ion-item-of-an-ion-list-component/90851 "2017-05-18T15:41:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gauz09](https://avatars.discourse-cdn.com/v4/letter/g/f17d59/32.png) [@gauz09](https://forum.ionicframework.com/u/gauz09)\
**Post date:** [May 18, 2017, 3:41pm UTC](https://forum.ionicframework.com/t/ion-radio-in-ion-item-of-an-ion-list-component/90851/1 "2017-05-18T15:41:34Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/0/0/00ab4b669571fcb47e1f0b13704e066a65c8fcd3.PNG)

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

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

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** :

```auto
<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.

---

<div class="post-metadata">

**Author:** ![jblake](https://avatars.discourse-cdn.com/v4/letter/j/d26b3c/32.png) [@jblake](https://forum.ionicframework.com/u/jblake)\
**Post date:** [May 18, 2017, 4:03pm UTC](https://forum.ionicframework.com/t/ion-radio-in-ion-item-of-an-ion-list-component/90851/2 "2017-05-18T16:03:48Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/4/9/49ca870dfea46545ecc7c59a614db765d1ad09ad.png)

---

<div class="post-metadata">

**Author:** ![gauz09](https://avatars.discourse-cdn.com/v4/letter/g/f17d59/32.png) [@gauz09](https://forum.ionicframework.com/u/gauz09)\
**Post date:** [May 18, 2017, 5:03pm UTC](https://forum.ionicframework.com/t/ion-radio-in-ion-item-of-an-ion-list-component/90851/3 "2017-05-18T17:03:04Z")

</div>

@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. 🙂

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. ☹

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

---

<div class="post-metadata">

**Author:** ![jblake](https://avatars.discourse-cdn.com/v4/letter/j/d26b3c/32.png) [@jblake](https://forum.ionicframework.com/u/jblake)\
**Post date:** [May 18, 2017, 7:22pm UTC](https://forum.ionicframework.com/t/ion-radio-in-ion-item-of-an-ion-list-component/90851/4 "2017-05-18T19:22:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gauz09](https://avatars.discourse-cdn.com/v4/letter/g/f17d59/32.png) [@gauz09](https://forum.ionicframework.com/u/gauz09)\
**Post date:** [May 18, 2017, 8:17pm UTC](https://forum.ionicframework.com/t/ion-radio-in-ion-item-of-an-ion-list-component/90851/5 "2017-05-18T20:17:02Z")

</div>

@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. 😃

Thanks again for your great help, very much appreciated!