"active" class does not work in <ion-item href=""> because of "item-complex" class

ionic-v1
1

Hi, I am a newbie. Just created a new project with ionic start myApp sidemenu. Then I am trying to add active class to the <ion-item> in the <ion-side-menu side="left">. The following is the partial code:

<ion-list>
        <ion-item class="item-icon-left item-dark active" nav-clear menu-close ng-click="login()">
          <i class="icon ion-ios-chatbubble"></i>
          Login
        </ion-item>
        <ion-item class="item-icon-left item-dark" nav-clear menu-close href="#/app/search">
          <i class="icon ion-ios-email"></i>
          Search
        </ion-item>
        <ion-item class="item-icon-left item-dark active" nav-clear menu-close href="#/app/browse">
          <i class="icon ion-ios-videocam"></i>
          Browse
        </ion-item>
      </ion-list>

The first active class works because the first <ion-item> does not have href attribute.
The second active class does not work and I figured out it’s because it has href attribute and when I inspect that element in chrome, href attribute will add item-complex class which makes active class doesn’t work. If I remove the item-complex class in chrome Elements editor or if I remove href attribute from the above code, active will work fine.

Is this expected or a bug? How can I workaround it?
Thanks a lot.

PS:
Here is the code: http://codepen.io/anon/pen/PwOQwR active will not work when there is “href” attribute because of “item-complex” class.

2

I’m not sure its a bug or not, but its because the <a> inside of the ionItem (added when href is used) has its own background color. It is here:

.item-complex.item-dark > .item-content {
  border-color: #111;
  background-color: #444;
  color: #fff;
}

You can override this yourself by doing something like this.

.item-complex.item-dark.active > .item-content {
  background-color: #111;
}
3

@gnomeontherun I tried

.item-complex.item-dark.active > .item-content {
    border-color: #000;
    background-color: #262626;
}

It works. Thank you very much for your help!

PS: I am not sure if it’s a bug or not. Just opened an issue: https://github.com/driftyco/ionic/issues/3050

4

Hiya, I need to manipulate the included with the href for a particular …but only for that one and not how its done for all the others. If i use the above method provided by @gnomeontherun then that impacts ALL ion-item hrefs used throughout.

How can I apply changes to the from ion-item href in only one location?