Ion-item text not cutting a long line (text-overflow) properly in production

Ionic Framework ionic-v3
1

Hello guys, i have a different result while developing and in production, when I use ionic serve everything looks ok, the text in ion-item wrapping properly as expected, but when in production ionic cordova build android --prod --release everything is a mess, no padding, no text-wrapping. . . am I missing something or this is a bug? Anyone ever facing this problem?
Using ionic serve

localhost-8100-(Nexus 6P)
localhost-8100-(Nexus 6P).png412×732 10.9 KB

In production ionic cordova build android --prod --release
notemath
Screenshot_2017-08-13-00-54-09-535_id.karnadi.notemath.png1080×1920 494 KB 


<ion-header no-shadow no-border>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>All Calculation</ion-title>
  </ion-navbar>
</ion-header>
<ion-content no-padding>
  <ion-list>
    <ion-item-sliding *ngFor="let i of data._data">
      <button ion-item (click)="goToEditor(i)">
       <h2>{{i?.name}}</h2>
       <p >{{i?.note}}</p>
    </button>
      <ion-item-options side="right">
        <button ion-button color="primary" (click)="renameNote(i)">
        <ion-icon name="mail"></ion-icon>
        Rename
      </button>
        <button ion-button color="danger" (click)="removeNote(i)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
  <ion-fab bottom right>
    <button ion-fab (click)="newNote()"><ion-icon large name="add"></ion-icon></button>
  </ion-fab>
  <div *ngIf="data._data.length == 0" class="no-list" text-center>
    You have no calculation yet, Make one with the big plus button in the bottom right.
  </div>
</ion-content>

Ionic Info

cli packages: (/media/ujang/Boice/Proyek/mathpad/node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.3
    Node              : v7.6.0
    OS                : Linux 4.10
    npm               : 4.1.2

thanks

2

I have to add this style to app.scss

.label-md {
  margin: 13px 8px 13px 0;
}

ion-label {
  margin: 0;
  display: block;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

in the production build, the ion-label and .label-md style is missing in main.css.

1 Like