CODEWITHSUNDEEP
angularionic2ionic3
user1188867
user1188867

Reputation: 3978

ionic 2 ion-select not working in ion-card

I am using ionic 2 in which ion-select is not getting displayed when it is placed inside ion-card. please see my code below :

  <ion-content>
  <ion-list>
    <ion-item>
        <ion-card>
          <ion-label>Quantity</ion-label>
          <ion-select>
            <ion-option value="nes">0</ion-option>
            <ion-option value="n64">1</ion-option>
            <ion-option value="ps">2</ion-option>
            <ion-option value="genesis">3</ion-option>
            <ion-option value="saturn">More</ion-option>
          </ion-select>
      </ion-card>
    </ion-item>
  </ion-list>
</ion-content>

If I remove ion-card everything works as expected. Is this a bug in ionic 2 or am I missing anything?

Upvotes: 2

Views: 1085

Answers (2)

sebaferreras
sebaferreras

Reputation: 44659

The problem with your code is that the ion-card component should not go inside of an ion-item. As you can see in this working plunker, you can change it like this to make it work:

<ion-content>

  <ion-card>
    <ion-item>
      <ion-label>Quantity</ion-label>
      <ion-select>
        <ion-option value="nes">0</ion-option>
        <ion-option value="n64">1</ion-option>
        <ion-option value="ps">2</ion-option>
        <ion-option value="genesis">3</ion-option>
        <ion-option value="saturn">More</ion-option>
      </ion-select>
    </ion-item>
  </ion-card>

</ion-content>

Please also notice that I've placed the label and the select elements inside of an ion-item.

Upvotes: 2

Shanil Fernando
Shanil Fernando

Reputation: 1322

try card content inside <ion-card-content></ion-card-content> 

<ion-content>
      <ion-list>
        <ion-item>
            <ion-card>
              <ion-label>Quantity</ion-label>
               <ion-card-content>
                <ion-select>
                 <ion-option value="nes">0</ion-option>
                 <ion-option value="n64">1</ion-option>
                 <ion-option value="ps">2</ion-option>
                 <ion-option value="genesis">3</ion-option>
                 <ion-option value="saturn">More</ion-option>
               </ion-select>
            <ion-card-content>
          </ion-card>
        </ion-item>
      </ion-list>
    </ion-content>

Upvotes: 0

Related Questions