CODEWITHSUNDEEP
cssangularionic-frameworksassionic3
Emilien
Emilien

Reputation: 2759

ion-item / ion-native background color

I'm getting an issue with ion-item background color.

What I want :

Set the background color to transparent.

What I have :

<ion-item class="custom-ion-toggle">
    <ion-label>Remember me!</ion-label>
    <ion-toggle formControlName="remember" slot="start" color="secondary" mode="ios"></ion-toggle>
</ion-item>

This generate a <div class="item-native"> with a white background.

What I've tried to do :

app.component.scss :

.item-native {
    background: transparent !important;
}

So this is what I get :

enter image description here

Upvotes: 3

Views: 2931

Answers (7)

Charles Xavier
Charles Xavier

Reputation: 75

I had the same problem, I just set the property color to "undefined" in the ion-item tag and it works, give it a try. (Also I set lines to none in ion-list to remove lines at the bottom of each item)

<ion-list lines="none">
  <ion-item color="undefined">
    <ion-avatar slot="start">
      <img [src]="student.photo" />
    </ion-avatar>

    <ion-label>
      <p>{{student.name}}</p>
    </ion-label>
  </ion-item>
</ion-list>

Upvotes: 0

neurona.dev
neurona.dev

Reputation: 1407

In Ionic 6:

Set color property to item:

<ion-item color="primary">

In global.scss override the color:

ion-item {
    --ion-color-primary: transparent;
}

Upvotes: 0

aakatheeri
aakatheeri

Reputation: 93

Use this on your css style:

ion-item {
 --background: transparent !important;
}

Upvotes: 0

Pramod Chk
Pramod Chk

Reputation: 1

use ion-list instead of ion-item it will solve the problem

Upvotes: -2

Kumohira
Kumohira

Reputation: 41

try this in your css page :

ion-item {
  --ion-background-color: transparent !important
}

Upvotes: 4

AndrWeisR
AndrWeisR

Reputation: 1226

Use the ion-item CSS custom property supplied by Ionic:

.custom-ion-toggle {
  --background-color: transparent;
}

Upvotes: 0

Aniruddh Thakor
Aniruddh Thakor

Reputation: 1616

try this in login.scss

 .custom-ion-toggle{
       background-color: transparent !important;
   }

i have tried it in my app and it's working completely fine.

Upvotes: 0

Related Questions