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

ion-item-divider color has no effect #8376

Closed
aggarwalankush opened this issue Oct 1, 2016 · 15 comments · Fixed by #9094
Closed

ion-item-divider color has no effect #8376

aggarwalankush opened this issue Oct 1, 2016 · 15 comments · Fixed by #9094
Assignees
Milestone

Comments

@aggarwalankush
Copy link
Contributor

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>

screenshot 2016-09-30 17 49 56

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

usarora commented Oct 1, 2016

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

abartolo commented Oct 2, 2016

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

@manucorporat manucorporat added the v2 label Oct 2, 2016
@brandyscarney brandyscarney added this to the 2.0.0-rc.1 milestone Oct 3, 2016
@aggarwalankush
Copy link
Contributor Author

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

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

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

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

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

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.

@brandyscarney brandyscarney modified the milestones: 2.0.0-rc.1, 2.0.0-rc.2 Oct 13, 2016
@gigocabrera
Copy link

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

@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 added a commit that referenced this issue Nov 9, 2016
- 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
brandyscarney added a commit that referenced this issue Nov 9, 2016
…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
adamdbradley pushed a commit that referenced this issue Nov 11, 2016
* 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
Copy link
Member

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

It works with the nightly version. Thanks!

@RezaRahmati
Copy link

I have same issue with 2.1.8

@LenonLopez
Copy link

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

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

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

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 9, 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

Successfully merging a pull request may close this issue.