Is it a problem in <ion-list> or <ion-item> or the combination of both?


#1

I am trying to use the following code to show a list of items with a radio-button () on left in the item and a button for the text but it isn’t working. It shows the list with radio-buttons only and not the button.

Would appreciate if somebody can help me understand what I am doing wrong.

Code:

<ion-content padding>
    <ion-list radio-group>
        <ion-item *ngFor="let account of accounts">
            <ion-radio item-left [value]="account.accountId"></ion-radio>
            <button ion-button>
              {{account.accountName}}
            </button>
        </ion-item>
    </ion-list>
    <button block ion-button>
        Move
    </button>
</ion-content>

Screenshot:


#2

well giving that the app showed up three rows it means there are three elements , what you need to do is to ensure you are accessing the elements right , can you provide the data in the array so we can help you more ?

and one more thing :
why did you put empty radio buttons ?


#3

Thanks for the quick reply @keloa!

Accessing the elements right, that’s the first thing I checked after it didn’t show the text in the ion-item. So, to test it instead of <button ion-button> I used <ion-label> and it worked. I started seeing the text. I guess, I can continue with using <ion-label>.

Now, with ion-label, I am trying to put an icon (ios-arrow-forward) at the right-end of each ion-item. Any idea how I can do this?

As for empty radio buttons, I am trying to implement two functionalities in this list, as below:

  1. User can tap/click on a radio button and tap/click on the “Move” button at the bottom to move the selected item to, let’s say, another list.

  2. User can tap/click on the item (anywhere except the radio button) and the app will show the details of tapped item.

Please do suggest if there is a better way to code this.

Thanks.


#4

I don’t know if the following idea will work or no but try this :

<ion-radio item-left [value]="account.accountId">
            <button ion-button>{{account.accountName}} </button>
</ion-radio>

#5

@keloa - Getting the same behavior with the code you suggested. Don’t get the text displayed.


#6

I came up with a solution :

<ion-label><button>{{account.accountName}}</button></ion-label>
<ion-radio item-left [value]="account.accountId">
</ion-radio>

I’ve tested it and it’s working !

you should probably do some styling in your case (in my case I was just testing the idea) XD
hope it works as you wanted !


#7

@keloa - I wanted the radio buttons on the left side of text which I have done as in the screenshot below. I am facing two more problems which will explain after the screenshot:

Here is the code:

<ion-content padding>
    <ion-list radio-group>
        <ion-item *ngFor="let account of accounts">
            <ion-radio item-left [value]="account.accountId" (click)="showAlert(account.accountId)"></ion-radio>
            <ion-label icon-right>
                {{account.accountName}}
                <ion-icon name="ios-arrow-forward"></ion-icon>
            </ion-label>
        </ion-item>
    </ion-list>
    <button block ion-button>
        Move
    </button>
</ion-content>

So as you can see, the radio buttons are on the left. Now the two problems I am facing are:

  1. I want the radio button to be checked/selected only when I tap/click on it explicitly. Right now, it’s getting selected even when I am tapping in the other area of the item (<ion-item>).

  2. The ‘>’ you see after the text in each of the item, my intention was to show them at the end of each of the item instead of right after the text. The idea is to tap on the item (not the radio button) to view that item’s details.

Any idea on how I can achieve the above two things?

I tried adding item-end and also icon-right attributes in the ion-item but none worked. Also tried detail-push attribute of ion-item, didn’t work.
So added icon-right to ion-label but it’s showing right after the text.

Thanks.


#8

Actually, came across this in this forum. This is from March 2016 and since they created an issue for it so I want to assume they have taken care of it but it’s still not working. :frowning:

It needs $item-md-detail-push-show to be set to true in SCSS. I tried it, didn’t work. Maybe I am doing it wrong.
All I have done is added the following to my page’s SCSS file:

page-account {
    $item-md-detail-push-show: true

}

#9

Got #2 working! Still not able to separate the radio-button tap from rest of the ion-item. :frowning:

Added

$item-md-detail-push-show: true;

to variable.scss.

And added detail-push on my ion-item…that’s it!

Remember to add the semi-colon ‘;’ after you set the variable to true. I lost at least 10 minutes by looking at some irrelevant error it gave me for an import that is later in the file. :rolling_eyes:


#10

Hay @gauz09,

have you able to find solution for #1 ?


#11

Hi @bhavin_webdesk, yes. @jblake was kind enough to help me with a solution to my post as in this link.

Hope this helps.