Search code examples
ionic-frameworkselection-select

ion-select showing three dots

I am using ion-select in my app. But when i run it on the device, ion-select shows three dots in spite of having sufficient space.

enter image description here

My Code is

<ion-row *ngIf="item.type=='variable'"> 
  <ion-col> 
    <div class="addtocart">Add</div> 
  </ion-col> 
  <ion-col>
    <ion-item class="item">
      <ion-select placeholder="Size" interface="popover">
        <ion-option *ngFor="let items of item.attributes[0].options">
        {{items}}
        </ion-option>
      </ion-select>
    </ion-item>
  </ion-col>
</ion-row>

I have already tried using max-width:100% . ion-select works perfectly when i use it in new row. But i want to display it with other item in the same row. Please help, i have been searching the net for the last 5-6 hours but no help.

Solution

  • Use text-wrap in ion-item or ion-select,it will wrap your select text. 

    <ion-row *ngIf="item.type=='variable'"> 
  <ion-col> 
    <div class="addtocart">Add</div> 
  </ion-col> 
  <ion-col>
    <ion-item class="item" text-wrap>
      <ion-select placeholder="Size" interface="popover" text-wrap>
        <ion-option *ngFor="let items of item.attributes[0].options">
        {{items}}
        </ion-option>
      </ion-select>
    </ion-item>
  </ion-col>
</ion-row>

    Then if it is not working then give min-width to ion-select in css