CODEWITHSUNDEEP
javascripthtmlangularionic-frameworkionic3
lei lei
lei lei

Reputation: 1829

How to show hiding part of the text in ionic app?

I am building an ionic 3 application, there is a problem I cannot show complete text, part of them is hid automatically due to the text has long content.

enter image description here

then...

enter image description here

How to show the hiding part of the text in ionic app? As you can see in the above captured screen, part of the time text is hided as ... Corresponding code in html is as below:

<ion-label> Select Trip </ion-label>
<ion-select [(ngModel)]="tripid" (ionCancel)="onCancel()" (ionChange)="onChange()">
  <ion-option *ngFor="let subtrip of trips" [value]="subtrip.id">
    {{subtrip.startTime}} - {{subtrip.stopTime}}
  </ion-option>
</ion-select>

Upvotes: 0

Views: 1066

Answers (4)

AVJT82
AVJT82

Reputation: 73357

In ionic 3 you need to override the css, this seems to work fine:

.alert-ios .alert-radio-label {
  white-space: unset !important;
}

.alert-md .alert-radio-label {
  white-space: unset !important;
}

.alert-wp .alert-radio-label {
  white-space: unset !important;
}

DEMO: StackBlitz

Upvotes: 1

rtpHarry
rtpHarry

Reputation: 13125

You haven't clarified but this looks like Ionic 4 code.

The correct way to control this is to use the built in ion-text-wrap class:

CSS Utilities - Ionic Documentation

I think this need to go on the ion-option:

<ion-label> Select Trip </ion-label>
<ion-select [(ngModel)]="tripid" (ionCancel)="onCancel()" (ionChange)="onChange()">
  <ion-option class="ion-text-wrap" *ngFor="let subtrip of trips" [value]="subtrip.id">
    {{subtrip.startTime}} - {{subtrip.stopTime}}
  </ion-option>
</ion-select>

But if not / maybe also on the ion-select:

<ion-label> Select Trip </ion-label>
<ion-select class="ion-text-wrap" [(ngModel)]="tripid" (ionCancel)="onCancel()" (ionChange)="onChange()">
  <ion-option class="ion-text-wrap" *ngFor="let subtrip of trips" [value]="subtrip.id">
    {{subtrip.startTime}} - {{subtrip.stopTime}}
  </ion-option>
</ion-select>

Updated

You have now specified Ionic 3. The ion-text-wrap class is for Ionic 4.

In Ionic 3 this was just an attribute called text-wrap but I'm not sure if it was limited to certain components. Try replacing:

<ion-label> Select Trip </ion-label>
<ion-select text-wrap [(ngModel)]="tripid" (ionCancel)="onCancel()" (ionChange)="onChange()">
  <ion-option text-wrap *ngFor="let subtrip of trips" [value]="subtrip.id">
    {{subtrip.startTime}} - {{subtrip.stopTime}}
  </ion-option>
</ion-select>

Or a combination of one of them maybe.

Upvotes: 1

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

in your global.css add

.alert-radio-label {
  text-overflow: initial !important;
  white-space: pre-line !important;
}

Upvotes: 0

Pawan Sharma
Pawan Sharma

Reputation: 2342

You can use adjust the text so that it appears in the next time by setting a class on ion-option e.g.-

<ion-option class="adjust-text".....

.adjust-text {
    white-space: normal;
    overflow: visible;
}

It should work without overflow: visible though.

Upvotes: 0

Related Questions