ion-item-divider color has no effect #8376

aggarwalankush · 2016-10-01T00:55:27Z

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

The text was updated successfully, but these errors were encountered:

usarora · 2016-10-01T07:41:39Z

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 · 2016-10-02T00:54:11Z

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 · 2016-10-04T11:56:09Z

@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 · 2016-10-04T13:02:36Z

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 · 2016-10-04T15:07:57Z

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 · 2016-10-04T18:09:12Z

@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 · 2016-10-08T09:25:35Z

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 · 2016-10-12T08:02:29Z

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 · 2016-10-28T19:47:04Z

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

- adds ItemDivider class to add color and mode css classes to item divider - adds e2e test for item divider colors - adds sass variables to improve control over list headers and item divider styles - fixes style for item divider so it will be styled regardless of being inside a list for md and wp modes references #8376

…nt and item - change the default text color and background color to match the theme variables. This makes popover look better on dark theme and removes the nesting of styles that breaks list headers. fixes #8376

* fix(item): fix color input for item divider and list header - adds ItemDivider class to add color and mode css classes to item divider - adds e2e test for item divider colors - adds sass variables to improve control over list headers and item divider styles - fixes style for item divider so it will be styled regardless of being inside a list for md and wp modes references #8376 * refactor(popover): remove the background color styling from ion-content and item - change the default text color and background color to match the theme variables. This makes popover look better on dark theme and removes the nesting of styles that breaks list headers. fixes #8376

brandyscarney · 2016-11-11T01:53:49Z

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

npm install --save ionic-angular@nightly

Thanks!

FunnyGhost · 2016-11-11T14:56:08Z

It works with the nightly version. Thanks!

RezaRahmati · 2016-11-19T22:33:40Z

I have same issue with 2.1.8

LenonLopez · 2016-11-28T08:00:22Z

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 · 2016-11-28T15:12:44Z

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 · 2016-12-01T06:56:45Z

@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 :)

manucorporat assigned brandyscarney Oct 1, 2016

manucorporat added the v2 label Oct 2, 2016

brandyscarney added this to the 2.0.0-rc.1 milestone Oct 3, 2016

ekhmoi mentioned this issue Oct 11, 2016

Item divider "color" attribute doesn't work with RC0 #8628

Closed

brandyscarney modified the milestones: 2.0.0-rc.1, 2.0.0-rc.2 Oct 13, 2016

brandyscarney modified the milestones: 2.0.0-rc.2, 2.0.0-rc.1 Oct 14, 2016

brandyscarney mentioned this issue Oct 25, 2016

inset list header [color="dark"] background bug? #8887

Closed

jgw96 modified the milestones: 2.0.0-rc.3, 2.0.0-rc.2 Nov 1, 2016

brandyscarney modified the milestone: 2.0.0-rc.3 Nov 4, 2016

This was referenced Nov 9, 2016

fix(item): fix color input for item divider and list header #9094

Merged

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

adamdbradley closed this as completed in #9094 Nov 11, 2016

ionitron-bot bot locked and limited conversation to collaborators Sep 9, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ion-item-divider color has no effect #8376

ion-item-divider color has no effect #8376

aggarwalankush commented Oct 1, 2016

usarora commented Oct 1, 2016

abartolo commented Oct 2, 2016

aggarwalankush commented Oct 4, 2016

NickStemerdink commented Oct 4, 2016

brandyscarney commented Oct 4, 2016

aggarwalankush commented Oct 4, 2016

SoaringTiger commented Oct 8, 2016

ghenry22 commented Oct 12, 2016

gigocabrera commented Oct 28, 2016

brandyscarney commented Nov 11, 2016

FunnyGhost commented Nov 11, 2016

RezaRahmati commented Nov 19, 2016

LenonLopez commented Nov 28, 2016

brandyscarney commented Nov 28, 2016

LenonLopez commented Dec 1, 2016

ion-item-divider color has no effect #8376

ion-item-divider color has no effect #8376

Comments

aggarwalankush commented Oct 1, 2016

Short description of the problem:

What behavior are you expecting?

usarora commented Oct 1, 2016

abartolo commented Oct 2, 2016

aggarwalankush commented Oct 4, 2016

NickStemerdink commented Oct 4, 2016

brandyscarney commented Oct 4, 2016

aggarwalankush commented Oct 4, 2016

SoaringTiger commented Oct 8, 2016

ghenry22 commented Oct 12, 2016

gigocabrera commented Oct 28, 2016

brandyscarney commented Nov 11, 2016

FunnyGhost commented Nov 11, 2016

RezaRahmati commented Nov 19, 2016

LenonLopez commented Nov 28, 2016

brandyscarney commented Nov 28, 2016

LenonLopez commented Dec 1, 2016