ion-select showing three dots

Question

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.

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.

score 2 · Accepted Answer · answered Feb 19 '19 at 10:57

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

I had to add min-width to ion-item also but that made it work. Thanks — Akash Chaudhary, Feb 19 '19 at 18:57

ion-select showing three dots

1 Answers1