How to show full text for options of ionic select button? - html

Question

I have added a ionic select button in the page. The option will show a long string, I hope to it can show full text string, but the string is truncated with dot-dot-dot as below:
My code is like:
<ion-item *ngIf="select == 'trip'">
<ion-label> Select Trip </ion-label>
<ion-select text-wrap>
<ion-option *ngFor="let subtrip of trips" value = {{subtrip.tripid}}> {{subtrip.startTime}} - {{subtrip.stopTime}} </ion-option>
</ion-select>
</ion-item>
I have tried add text-wrap in the html, but it doesn't work... Can you help?

Answer 1

For Ionic 4, every option inside ion-select needs to be wrapped inside ion-select-option. Trying out interface="action-sheet" will show the full text of options. The default interface is alert.
<ion-item>
<ion-label>Food</ion-label>
<ion-select interface="action-sheet" [(ngModel)]="food">
<ion-select-option [value]="Burger">BurgerBurgerBurgerBurgerBurgerBurgerBurger</ion-select-option>
<ion-select-option [value]="Sandwich">SandwichSandwichSandwichSandwichSandwichSandwich</ion-select-option>
<ion-select-option [value]="Salad">SaladSaladSaladSaladSaladSaladSalad</ion-select-option>
</ion-select>
</ion-item>
Default alert interface
action-sheet interface

Answer 2

So if this is your template (html):
<ion-content>
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true">
<ion-option>BaconBaconBaconBaconBaconBaconBaconBaconBacon</ion-option>
<ion-option>Black OlivesBaconBaconBaconBaconBaconBaconBacon</ion-option>
<ion-option>Extra CheeseBaconBaconBaconBaconBaconBaconBacon</ion-option>
</ion-select>
</ion-item>
</ion-content>
And you want to ensure no-wrap behavior you can not apply text-wrap to ionic components and hope it will support this behavior out of box unfortunately.
Normally you want to go to your Chrome Dev Tools > Elements and see what CSS rules are inherited and applied to your component (ion-select in this case):
Now depending on which platform style you are using (ios or md) you need to apply changes to this class (in case of ios used like in my case):
page-tutorials {
.no-scroll .scroll-content {
overflow: hidden;
}
}
.alert-ios .alert-md .alert-checkbox-label {
white-space: normal !important;
}
Please note you need to add such class overriding outside of your page component's css (as above) to make it work.

Answer 3

<ion-list radio-group [(ngModel)]="radioGroup">
<ion-item>
<ion-label text-wrap>RadioButtonText</ion-label>
<ion-radio checked="false" value="value"></ion-radio>
</ion-item>
This should work fine for you