Ionic-Item Color and Href Not Working

ionic-item color and href not working

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

Color Attribute not working in Heading inside ionic content tag

Use ion-text directive on your element then apply color. It will work.

In your case it should be like this.

<h1 ion-text color="secondary">LOGO</h1>
<!-- and -->
<p ion-text color="danger">Sign in with social media account</p>

Why href inside button not working?

Drop the button and decorate the a element with the class names.

<a href="www.google.com" class="button button-outline button-positive">fes</a>

hope this helps.

Change color of an ion-item on condition

The color will change based on your variable if you add square brackets around color.

<ion-note item-end [color]="!isShipButtonDisabled ? 'primary' : 'secondary'">

Adding the square brackets will tell angular to evaluate that expression.

Changing background color of Ionic ion-item in CSS

Ionic is injecting an element inside the <ion-item> giving the element a structure of:

<ion-item>
  <div class="item-content">
  </div>
</ion-item>

The Ionic CSS contains a CSS property:

.item-content {
  background-color:#ffffff;
}

The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.

Apply the background color to the .item-content element, as @ariestiyansyah recommended by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a <link> to it in the header, with the following:

.item .item-content {
  background-color: transparent !important;
}

Here's the working demo.

Ionic 4: ion-item background transparent has no effect

Update:

Finally found the cause for that weird behaviour. Looks like the .list-ios on ion-list was the malefactor.

This did the trick for me:

ion-list {
    background: transparent;

    ion-item {
        --background: inherit;
    }
}

How to change only one ion-item color in ion-list when clicked?

Take a Variable and check index of your *ngForif item gets clicked change color.

.ts

selectedItem: any;

.html

<ion-item *ngFor="let exercise of exercisesArray; let i = index" (click)="onClick(exercise); selectedItem = i"  [ngStyle]="{color: selectedItem == i ? YourNewColor : null}">
{{exercise.title}}
</ion-item>

update you selectedItem variable when Item gets clicked and check it in your ngStyle to apply new Color.

Change ion-item background color in Ionic 4.0

Use this special ionic CSS rule:

ion-item{
   --ion-background-color:#fff;
}

---

Related Topics