Ionic 4 IonSelect текст выбранного значения усекается слишком рано

Question

У меня есть стандартная 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

[ОБНОВЛЕНИЕ1]

Пробовал использовать поплавок, как предложено, но я получаю ..

Answer 1

Я только что нашел ваш вопрос, когда искал то же самое. После некоторого времени, пытаясь найти полезные советы безуспешно, я подумал о том, чтобы предоставить свои выводы для будущих кодеров, которые в конечном итоге будут здесь, поскольку вы, возможно, уже решили свою проблему.

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.