search

ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
128 stars 85 forks source link

css for ion-tab does not work with i18n properly #804

Open jesse23 opened 6 years ago

jesse23 commented 6 years ago

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ ] 3.x [x] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: i18n string is there in source:

<span class="tab-button-text">Hello</span>

But it is chew up by improper css definition. image

Expected behavior:

Well, show it properly.

Steps to reproduce:

  1. Get OOTB Tabs template
  2. Do ionic i18n by following http://ionicframework.com/docs/developer-resources/ng2-translate/
  3. Do def below: 
    <ion-tab [root]="tab1Root" [tabTitle]="( 'HELLO' | translate )" tabIcon="home"></ion-tab>

    3 run ionic-app-scripts serve

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here
jesse23 commented 6 years ago

Current WA is overwrite the CSS forcibly at tab.scss:

.tab-button-text {
  display: block;
}
mhartington commented 6 years ago

Can confirm, seeing this as well in a demo. Looks like the issue is here, where we're setting some values on the tab-button

https://github.com/ionic-team/ionic/blob/master/src/components/tabs/tab-button.ts#L51-L60