Ionic-framework: Ion-item paragraph text color

Created on 23 Apr 2016  路  4Comments  路  Source: ionic-team/ionic-framework

Short description of the problem:

A p element inside an ion-item element is colored gray by default. This is fine but as it is the color cannot be overwritten using eg. <p primary>.

This, of course, is only an example. It applies to lots of other elements with color styles.

What behavior are you expecting?

I'd like to be able to add the primary color to _any_ element without adding extra classes.

<ion-list>
  <ion-item>
    <p primary>Ion item p which should be colored as primary but is not</p>
    <h3 primary>Ion Item h3 where coloring works as expected</h3>
  </ion-item>
</ion-list>

Which Ionic Version? 2.x

Plunker that shows an example of your issue

http://plnkr.co/edit/I1sPuGmNwauHy40F4ITw?p=preview

Run ionic info from terminal/cmd prompt:

Your system information:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.3 Build version 7D175 

Most helpful comment

When using color on text elements, always add ion-text like this:

<h3 ion-text color="danger">Step 1 / 4</h3>

This is also mentioned in the changelog for v3: link

All 4 comments

Thanks for the issue! This will be fixed in the beta 12 release. The color will be added the following way:

<ion-list>
  <ion-item>
    <p color="primary">Ion item p which should be colored as primary but is not</p>
    <h3 color="primary">Ion Item h3 where coloring works as expected</h3>
  </ion-item>
</ion-list>

Please see https://github.com/driftyco/ionic/issues/7467 for more info! :)

With version ionic-angular 3.0.1 the following doesn麓t work anymore

<h3 color="danger">Step 1 / 4</h3>

Please check or tell me what has been changed?

When using color on text elements, always add ion-text like this:

<h3 ion-text color="danger">Step 1 / 4</h3>

This is also mentioned in the changelog for v3: link

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings