Android TV - ion-select label width (angular)

Ionic Framework Ionic Angular
1

Hi there,
I managed to get my mobile app to work on Android TV (navigating with the TV remote wasn’t easy and the app isn’t as responsive as a native app…).
Since the screen is bigger, I would like to increase the width of the label inside ion-select to avoid cutting off the text, but I haven’t managed to do so.

Screenshot 2024-12-08 at 22.28.33
Screenshot 2024-12-08 at 22.28.331344×314 11.5 KB

Does anyone know how to change this?

Thanks

2
3

I would probably use the Label Slot.

<template>
  <ion-list>
    <ion-item>
      <ion-select placeholder="Favorite Fruit">
      <div class="no-truncate" slot="label">Default label That keeps going and going</div>
        <ion-select-option value="apple">Apple</ion-select-option>
        <ion-select-option value="banana">Banana</ion-select-option>
        <ion-select-option value="orange">Orange</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>
</template>

<style>
ion-select .no-truncate {
  text-overflow: unset;
  overflow: visible;
}
</style>
4

Thanks, this works. But I would have preferred something I can set globally rather than changing the html of the entire app.
But if there is no alternative…

5

Since it is in the ShadowDOM you cannot edit it directly with CSS. You can use some JS though.

document
  .querySelector('ion-select')
  .shadowRoot.querySelector('.label-text')
  .setAttribute('style', 'text-overflow: unset; overflow: visible;');