Ionic 4 IonSelect所选值文本过早截断

dfuffjeb 于 2022-12-09 发布在 Ionic

关注(0)|答案(1)|浏览(163)

我有一个标准的Ionic IonSelect设置如下...

<ion-item lines='none'>
      <ion-label>Location</ion-label>
      <ion-select type="text" placeholder='select...'>
        <ion-select-option *ngFor='let p of places' value="{{p.id}}">
          {{p.description}}
        </ion-select-option>
      </ion-select>
  </ion-item>

我的问题是，它只能处理相当短的文本，直到它开始截断，例如：

看起来标签和选定值都要使用50%的空间。
有没有办法让这段文字移到左边，几乎一直移到标签？
离子信息：

$ ionic info

    Ionic:

       Ionic CLI                     : 5.2.3 (C:\Users\pchapman\AppData\Roaming\npm\node_modules\ionic)
       Ionic Framework               : @ionic/angular 4.11.2
       @angular-devkit/build-angular : 0.802.0
       @angular-devkit/schematics    : 8.2.0
       @angular/cli                  : 8.2.0
       @ionic/angular-toolkit        : 2.0.0

    Cordova:

       Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
       Cordova Platforms : android 8.0.0, windows 6.0.1
       Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 12 other plugins)

    Utility:

       cordova-res : 0.7.0-testing.0
       native-run  : 0.2.8

    System:

       Android SDK Tools : 26.1.1 (C:\Users\pchapman\AppData\Local\Android\sdk)
       NodeJS            : v10.15.3 (C:\Program Files\nodejs\node.exe)
       npm               : 6.4.1
       OS                : Windows 10

更新

尝试按照建议使用浮动，但我得到：

ionic-framework

来源：https://stackoverflow.com/questions/58575518/ionic-4-ionselect-selected-value-text-truncates-way-too-soon

1条答案

按热度按时间

hxzsmxv21#

我只是发现你的问题，而寻找相同的。经过一段时间试图找到有用的提示不成功，我想提供我的发现，为未来的编码器，将结束在这里，因为你可能已经解决了你的问题。
TL;DR
离子选择校准的最快解决方案是在标签上设置位置，如下所示

<ion-label position="floating">Location</ion-label>

所以它最终会变成

<ion-item  lines='none'>
  <ion-label position="floating">Location</ion-label>
  <ion-select type="text" placeholder='select...'>
    <ion-select-option *ngFor='let p of places' value="{{p.id}}">
      {{p.description}}
    </ion-select-option>
  </ion-select>

它将使用位置浮动或堆叠，因为它将为选择结果换行。
这样，您仍然可以获得相同的离子组件，而无需进行许多修改，并且仍然可以解决UI混乱的问题。

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic 4 IonSelect所选值文本过早截断

更新

1条答案

相关问题

热门标签

最新问答