Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bimal72 opened this issue Sep 30, 2016 · 10 comments
Assignees
Milestone

Comments

@bimal72
Copy link

bimal72 commented Sep 30, 2016

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
Copy link

bglaz commented Sep 30, 2016

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
Copy link

NickStemerdink commented Oct 1, 2016

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 brandyscarney modified the milestones: 2.0.0-rc.2, 2.0.0-rc.1 Oct 18, 2016
@jgw96 jgw96 modified the milestones: 2.0.0-rc.3, 2.0.0-rc.2 Nov 1, 2016
@brandyscarney brandyscarney modified the milestone: 2.0.0-rc.3 Nov 4, 2016
@brandyscarney
Copy link
Member

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
Copy link

@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
Copy link
Member

@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 added a commit that referenced this issue Nov 10, 2016
- Remove native HTML element styling inside of cards (headings,
paragraph)
- Move the default color for the HTML elements to the content
- Generate colors for the card itself, the header, the content, and the
title using the color input
- Add e2e test for card colors

References #8330
@brandyscarney
Copy link
Member

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!

adamdbradley pushed a commit that referenced this issue Nov 11, 2016
* refactor(card): add color/mode classes to header, title, content

- Remove native HTML element styling inside of cards (headings,
paragraph)
- Move the default color for the HTML elements to the content
- Generate colors for the card itself, the header, the content, and the
title using the color input
- Add e2e test for card colors

References #8330

* refactor(item): remove paragraph styles, update activated colors

- Adds test for item colors
- Removes the color from native paragraph elements allowing colors to
be passed

Closes #9081

* refactor(item): bring back paragraph color and override in the item loop

* refactor(card): add back heading and paragraph colors and override in color loop
@brandyscarney
Copy link
Member

This should be fixed now, I released a nightly version of the framework ionic-angular@2.0.0-rc.2-201611110146. Could you try it out and let me know if you find any issues?

npm install --save ionic-angular@nightly

Thanks!

@schankam
Copy link

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

@schankam
Copy link

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
Copy link

ionitron-bot bot commented Sep 2, 2018

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 2, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants