Nested ion list not showing properly?

Ionic Framework ionic-v3
1

i have created a Reactive form in that form i want to show the gender option as radio options
the follwoing is my code but it will display anything, some body show me is there any attribute i am missing
here is my code

            <ion-item>
                <ion-label>Date of Birth</ion-label>
                <ion-datetime displayFormat="MM/DD/YYYY" formControlName="dob"></ion-datetime>
            </ion-item>
            <ion-item>
                <ion-list radio-group formControlName="gender">
                    <ion-list-header>Gender</ion-list-header>
                    <ion-item>
                        <ion-label>Male</ion-label>
                        <ion-radio checked value=0></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Female</ion-label>
                        <ion-radio value=1></ion-radio>
                    </ion-item>
                </ion-list>
            </ion-item>

and it display nothing in that item

image

what i am doing wrong
Just a bump? it’s been more that 12 hours please a basic thing or is it a bug?

2

Howdy, the trick is to simply add the item-content attribute to your ion-list, i.e.

            <ion-item>
                <ion-list radio-group formControlName="gender">
                    <ion-list-header>Gender</ion-list-header>
                    <ion-item>
                        <ion-label>Male</ion-label>
                        <ion-radio checked value=0></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Female</ion-label>
                        <ion-radio value=1></ion-radio>
                    </ion-item>
                </ion-list>
            </ion-item>

becomes

            <ion-item>
                <ion-list radio-group formControlName="gender" item-content> <!-- this right here -->
                    <ion-list-header>Gender</ion-list-header>
                    <ion-item>
                        <ion-label>Male</ion-label>
                        <ion-radio checked value=0></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Female</ion-label>
                        <ion-radio value=1></ion-radio>
                    </ion-item>
                </ion-list>
            </ion-item>
3 Likes
3

hi there so much thanks for the solution but one thing, where can i found the document for item-content

4

You can find it here:

Underneath the “Item Placement” and more importantly the “Content and Inputs” sections.