Change background color of a custom item complex activated item

ionic-v1
1

Hi,

i hope i will be clear, i have a list, and a custom css for change the background of item list (i called it item-contact) say : green.

.item.item-contact {
border-color: #4cdbd6;
background-color: #c6fefc;
color: #444; }

it is a complex item, with edit and delete buttons at right.

I can’t change the background color (dark green) when its activated, i tried to change :

.item.active.item-contact, .item.activated.item-contact, .item-complex.active .item-content.item-contact, .item-complex.activated .item-content.item-contact, .item .item-content.active.item-contact, .item .item-content.activated.item-contact {
border-color: #145fd7;
background-color: #145fd7; }

it doesnt work, i can only see border color changing, when i delete my css and have a classic white list, it’s working, list item become grey (and whanging color works fine)

where i’m wrong ??
thank for help

2

This should take care of it:

.item-contact .item-content {
   background-color: #c6fefc !important;
}

.item-contact .item-content.activated {
    border-color: #145fd7 !important;
    background-color: #145fd7 !important; 
}

In the future please put your code in a codepen, it makes it easier to help. Here’s the codepen where I placed your code.

3

hi brandyshea,

thank-you very very much for helping, i compared our both code, what i missed was :

href="#/item/{{item.id}}", adding it make it working very well !
Could you just explain to me what its doing ?

thank you !

4

Placing href on the ion-item inserts a hyperlink tag into the html. If you right click on one of the items and click inspect element you will see that it has added the link tag inside of the ion-item tag:

<a class="item-content ng-binding" ng-href="#/item/2" target="_self" href="#/item/2">
    Item 2
</a>

Without this tag the item is not a link. Here is some info on href. :smile:

5

Ok, thank you !

I have an another problem, the first item of the list go under the navbar, it look like content dont take care of the height value of the navbar and dont fit very well, any way to fix that ?

6

You can add the class “has-header” to the content.

<ion-content class="has-header">

But Ionic should be taking care of this depending on the structure of your app. How is your app structured? Are you using ion-nav-bar or ion-header-bar and is your ion-content wrapped?

The structure of mine is

<ion-nav-bar class="bar-balanced">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

And the nav-view gets populated by a template containing the following markup

<ion-view>
    <ion-content>
    </ion-content>
</ion-view>
7

that’s exacly how my app is structured :

i have

“



”

into my index.html

and into my contact.html :

"
<ion-content
class="has-header"
scrollbar-y="false"
padding=“true"
style=“background-color: #e5e5e5"

””

strangely, when i “comment” class=has-header" it works but other options don’t (scrollbar off, padding)
" <ion-content

        scrollbar-y="false"
        padding="true"
        style="background-color: #e5e5e5">"
8 
<ion-nav-view animation="slide-left-right-ios7"></ion-nav-view>[quote="fabilabo, post:7, topic:13491"]

that’s exacly how my app is structured :

i have

“<ion-nav-bar class=“bar-balanced”>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>”

into my index.html

and into my contact.html :

"<ion-view>
<ion-content
class="has-header"
scrollbar-y=“false"
padding=“true"
style=“background-color: #e5e5e5”
</ion-content>
</ion-view>””

strangely, when i “comment” class=has-header" it works but other options don’t (scrollbar off, padding)
" <ion-content
<!-- class=“has-header” -->
scrollbar-y="false"
padding=“true"
style=“background-color: #e5e5e5”>”
[/quote]

9

what a mess, hope you can see it!

10

I’ve modified the previous codepen to reflect your infrastructure. Maybe you can compare yours to this to see what the differences are? I’ve tested this using 1.0.0-beta.13 and the nightly builds and it is adjusting the content for the header.

11

i’ve using the last build too (beta 13)

i tried to reproduce my template and it don’t bug into the codepen… but i tried to change the headerbar height (because its what causing problem) without succes, it dont do anything :

<ion-nav-bar class="nav-title-slide-ios7" style="height: 60px">

could you confirm this ?

12

Correct. The ion-nav-bar tag is an Angular directive. Therefore when you add it to your HTML it shows only the ion-nav-bar tag, but it is actually creating HTML markup within it. If you inspect element on the navbar you will see there is HTML created inside the ion-nav-bar tag:

<ion-nav-bar class="bar-positive nav-bar-container" nav-bar-transition="ios" nav-bar-direction="none">
    <div class="nav-bar-block" nav-bar="cached">
        <ion-header-bar class="bar-positive bar bar-header disable-user-behavior" align-title="center">
        <div class="title title-center header-item"></div>
        </ion-header-bar>
    </div>
    <div class="nav-bar-block" nav-bar="active">
        <ion-header-bar class="bar-positive bar bar-header disable-user-behavior" align-title="center">
        <div class="title title-center header-item" style="-webkit-transition: 0ms; transition: 0ms; opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px);"></div>
        </ion-header-bar>
    </div>
</ion-nav-bar>

This is why modifying the height on the ion-nav-bar isn’t working. You would have to override the “bar” class in order to change the height, but I wouldn’t recommend doing this. There is something in your HTML that is causing the content not to shift down under the header, since you aren’t able to reproduce the problem in a codepen. I would look for the cause of this by copying over more and more of your code into a codepen until you can reproduce it.