ion-select 显示三个点

Question

我在我的应用程序中使用 ion-select。但是当我运行它在设备上时，尽管有足够的 space.

ion-select 显示三个点

我的代码是

<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>

我已经尝试过使用 max-width:100% 。当我在新行中使用它时，ion-select 工作得很好。但我想将它与同一行中的其他项目一起显示。请帮忙，过去 5-6 小时我一直在网上搜索但没有帮助。

Answer 1

在ion-item或ion-select[=20=中使用text-wrap ], 它将包裹你的 select 文本。

<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>

然后，如果它不起作用，则将 min-width 提供给 ion-select in css

ion-select 显示三个点

ion-select showing three dots

select

ionic-framework

ion-select