ion-item-divider color has no effect

[aggarwalankush]

Short description of the problem:

Setting color attribute on ion-item-divider has no effect. On page, it shows default light color and in Popover it doesn't even show light color. It was working perfectly in beta 11.

What behavior are you expecting?

Setting color should change divider color

Steps to reproduce:
Please see this commit to reproduce https://github.com/aggarwalankush/ionic-inappbrowser-issue/commit/46d3e553c0e099771530cce3d533dce374ec7cbd

Just primary or color="primary", no change in color

 <ion-item-group>
    <ion-item-divider primary>A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
  </ion-item-group>
  <ion-item-group>
    <ion-item-divider color="primary">B</ion-item-divider>
    <ion-item>Bangladesh</ion-item>
    <ion-item>Brazil</ion-item>
  </ion-item-group>

Which Ionic Version? 1.x or 2.x
Ionic 2 rc0

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.3.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

[usarora]

I am also having same issue. Here is the information:

Your system information:

Cordova CLI: 6.3.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.4.0
Xcode version: Xcode 8.0 Build version 8A218a

[abartolo]

I am also having the same issue.

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Windows 7 SP1
Node Version: v6.2.0

[aggarwalankush]

@brandyscarney seems like some css issue. Can you please suggest a workaround in rc0? Can I override some css to show divider color in popover, at least some color?

[NickStemerdink]

You could use inline styling as a temporary solution.

<ion-item-divider style="background-color: blue; color: red;">

For the other components you can use color=primary as a temporary solution instead of color="primary" (notice the missing quotes).

The reason for the second workaround can be found here: #8330 (comment)

[brandyscarney]

As a temporary workaround you can add the following Sass to the theme/variables.scss file to generate the css for all colors on an ion-item-divider prior to the theme import:

@each $color-name, $color-base, $color-contrast in get-colors($colors) {

  ion-item-divider.item-ios.item-ios-#{$color-name},
  ion-item-divider.item-md.item-md-#{$color-name},
  ion-item-divider.item-wp.item-wp-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;
  }

}

@import "ionic.theme.default";

[aggarwalankush]

@brandyscarney it worked on page but didn't work in popover. Right now I'm using workaround suggested by @NickStemerdink by adding style="background-color: #f4f4f4;" in popover <ion-item-divider>

Can you please test it works in popover as well before releasing rc.1? 👍

[SoaringTiger]

I have the same issue.
Your system information:
Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local:
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.2
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Not installed

[ghenry22]

It may be what is expected for the platform but on android ion-item-divider Color is never applied whether you use it just in a normal page or in another element like a popover.

[gigocabrera]

The same issue is true for the ion-list-header

<ion-list-header color="danger">
    Emergency
  </ion-list-header>

The header background color should change

[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!

[FunnyGhost]

It works with the nightly version. Thanks!

[RezaRahmati]

I have same issue with 2.1.8

[LenonLopez]

I had the same issue with 2.1.8. I did the npm install of the nightly version that @brandyscarney requested and now the ion-item-divider is properly colored with the "color="secondary"' attribute. Oddly enough I had a lot of install errors upon running the command but somehow it still works lol

[brandyscarney]

Hey there, 2.1.8 is the version of the Ionic Command Line Interface (CLI). If you run ionic info from within your project folder it will print out the framework version. This fix is in the 2.0.0-rc.3 release, and you can get that by running the following command 😄

npm install --save ionic-angular@latest

[LenonLopez]

@brandyscarney ohh that's right lol thank you for making me aware of that. just ran ionic info and I can confirm that i have 2.0.0-rc.3. Thanks again :)