New color attribute is not working in header tag, .e.g <h1 color="primary"> when it is in some container, e.g Card

[bimal72]

Hello,
I have used color attribute as follows.

<ion-card  >            
            <ion-card-content style="line-height:1" padding-horizontal text-left>
              <h1 text-center margin-bottom style="font-weight:bold" color="primary" >DEALS</h1>           

It should display DEALS in primary color but it don't.
Its rendered html is

<ion-card class="card-md">
            <ion-card-content padding-horizontal="" style="line-height:1" text-left="">
              <h1 color="primary"  class="text-md text-md-primary" ng-reflect-color="primary">DEALS</h1>

But it renders dark color.

When I inspect its css rules

.card-md h1 {
    margin: 0 0 2px;
    font-size: 2.4rem;
    font-weight: normal;
    color: #222; //this is dark color it renders
}

.text-md-primary {
   color: #1f9bcc; // this is primary color - strikeout

}

As a workaround if I put DEAL label in

 <h1 text-center margin-bottom style="font-weight:bold" ><span color="primary">DEAL</span></h1>, 

it is working as desired
Please help me to implement correctly.

[bglaz]

This seems to happen everywhere. I have the same issue when applying color="primary" to a ion-item-divider. The base CSS rule background color overrides the CSS rule that is trying to apply the primary background color. I also tried <ion-item-divider primary> as the documentation suggests, but this doesn't even apply the class at all.

[NickStemerdink]

In addition, I noticed that (in my case on ion-navbar) the color is being extracted including quotes. Resulting in wrong attributes.

<ion-navbar color=”primary”>
will be:
<ion-navbar class="toolbar toolbar-ios toolbar-ios-”primary”" color="”primary”" ng-reflect-color="”primary”" ng-reflect-hidden="false">

In the other cases the css selector for the default colors is more specific and therefor taking priority.

[brandyscarney]

Thanks for the issue! We are currently looking into ways to improve this.

@bglaz The issue with item divider will be resolved by this issue: #8376, when this PR is reviewed and merged: #9094

@NickStemerdink How are you adding those quotes? The issue there is that they are curly quotes, if you remove the curly quotes from your markup it will work fine:

<ion-navbar color="primary">

I'd still like to know how you are getting those so we can look into it though. :)

[NickStemerdink]

@brandyscarney, good catch, I didn't even notice that!

I traced back the quotes to the 2.0.0-rc.0 upgrade guide: https://github.com/driftyco/ionic/releases/tag/v2.0.0-rc.0.
Must've been a copy paste action.

[brandyscarney]

@NickStemerdink Ah strange! I'm not sure how those got in there. I updated the release though to remove them. Thanks for letting me know! :)

[brandyscarney]

Submitted a PR to fix this: #9118

When it's merged I'll create a nightly release for you to try out and update the issue here. Thanks!

[brandyscarney]

This should be fixed now, I released a nightly version of the framework [email protected]. Could you try it out and let me know if you find any issues?

npm install --save ionic-angular@nightly

Thanks!

[schankam]

Well, I still got the issue on an h2 element where the color is not applied (inside an ion-sliding item > ion-item)

[schankam]

Found the answer here: http://stackoverflow.com/questions/43960214/color-attribute-not-working-in-heading-inside-ionic-content-tag

Looks like the attribute "ion-text" is needed.

[ionitron-bot]

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.