I started a ionic project based on the sidemenu template. I am trying to change the background color for each element of the side menu (I would like every item to be of a different color).
I tried to add a ionic color class:
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="positive-bg" nav-clear menu-close ng-click="login()">
Login
</ion-item>
<ion-item class="calm-bg" nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item class="assertive-bg" nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close class="balanced-bg" href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
It works well on the Login element but not on the other elements. Removing the href attribute on other elements works... How can I have the background color and the href element?
An ion-item
with a href
attribute renders differently. For more info on the why see dfsq's answer
What you could do is instead of using the ion-list
directive, use the classes:
<ion-content>
<ul class="list">
<a href="" class="item positive-bg" nav-clear menu-close ng-click="login()">Login</a>
<a href="#/app/search" class="item calm-bg" nav-clear menu-close>Search</a>
<a href="#/app/browse" class="item assertive-bg" nav-clear menu-close>Browse</a>
<a href="#/app/playlists" class="item balanced-bg" nav-clear menu-close>Playlists</a>
</ul>
</ion-content>
Demo on Codepen
There are a few ways to do this. Here is another way:
Add a custom class to your side-menu list:
<ion-list class="sidemenu-list">
And then tell item-content to inherit the background-color from the item:
.sidemenu-list .item-complex .item-content {
background-color: inherit;
}
Codepen demo
The problem is that ion-item
directive renders a
element with class .item-content
inside if it has href
attribute. The classes you apply to ion-item
elements are defined as something like this:
.assertive-bg {
background-color: #ef473a;
}
and at the same class ionic defines these styles for links inside as
.item-complex .item-content, .item-radio .item-content {
position: relative;
z-index: 2;
padding: 16px 49px 16px 16px;
border: none;
background-color: white;
}
Later rule has higher specificity so it takes precedence over simple .assertive-bg
class rule.
To workaround this issue you want to create few additional rules manually:
.item-complex.assertive-bg .item-content {
background-color: #ef473a;
}
Demo: http://plnkr.co/edit/bbUel2goJGYy8fv0ltXm?p=preview
UPD. brandyshea provided much better solution of how styles should be overloaded without color values duplication. I will keep my answer for the sake of explanation it provides, though.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With