时间戳

首页 > 解决方案 > 离子选择显示三个点

ionic-framework - 离子选择显示三个点

问题描述

我在我的应用程序中使用离子选择。但是当我在设备上运行它时，尽管有足够的空间，离子选择仍会显示三个点。

在此处输入图像描述

我的代码是

<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 小时我一直在网上搜索，但没有任何帮助。

标签： ionic-frameworkselection-select

解决方案

在ion-item或ion-select中使用text-wrap，它将包装您选择的文本。

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

然后，如果它不起作用，那么在 css 中为ion-select提供min-width

推荐阅读