离子选择显示三个点

Question

我在我的应用程序中使用了离子选择。但是，当我在设备上运行它时，尽管有足够的空间，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-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中将 min-width 赋予 ion-select