CODEWITHSUNDEEP
cssionic2
Bill Noble
Bill Noble

Reputation: 6744

Make ionic ion-item have a transparent background

Is there a way to make the background of an ionic 2 <ion-item> be transparent?

I have tried this CSS but it doesn't make the item transparent:

.list .item, .item-content .item-inner .item-block .item-ios
{
  background: transparent !important;
}

ADDED CODE

My HTML looks like this:

<ion-content class="pu-my-plans-background">

  <div *ngIf="hasPlans">
    <ion-list no-lines class="pu-item-list">
      <!--<ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">-->
        <ion-item-sliding *ngFor="let plan of plans; let i = index" >
          <ion-item class="pu-section-list-item pu-my-plans-item" (click)="editPlan(plan.id, plan.rev, plan.title, i)">
            {{ plan.title }}
            <br>
            <span class="pu-my-plans-plan-date">{{ plan.updated}}</span>
            <button *ngIf="plan.important" ion-button clear item-right>
              <ion-icon name="ios-alert-outline"></ion-icon>
            </button>
          </ion-item>
          <ion-item-options side="right">
            <button ion-button color="danger" (click)="deletePlan(plan.id, plan.rev)">
              <ion-icon name="delete"></ion-icon>
              Delete
            </button>
          </ion-item-options>
        </ion-item-sliding>
      <!--</ion-item-group>-->
    </ion-list>
  </div>

</ion-content>

And my CSS like this:

page-my-plans {

}

.pu-my-plans-plus-circle {
  display: block;
  //border: 2px solid white;
  background-color: $pu-orange;
  border-radius: 50%;
  height: 38px;
  width: 38px;
}

.pu-my-plans-plus-circle span {
  font-size: 38px;
  font-weight: 100;
  color: white;
  position: absolute;
  top: -7px;
  left: 8.5px;
}
.pu-plan-addButton {
  font-size: 30px;
  margin-right: 14px;
  margin-top:-2px;
}


.pu-section-list-item{
  color: white;
  background-color: black;
  font-weight:$pu-item-font-weight;
  font-size:$pu-item-font-size;
  padding-left:20px;
  padding-right:0px;
}
.item{
  background: transparent !important
}
// THEMING CSS
// ===========
//
.pu-my-plans-background {
  background-image: url("../assets/img/[email protected]");
  background-size: cover !important;
}
.pu-my-plans-item {
  border-style:solid;
  border-bottom-width: 2px;
  border-bottom-color: $pu-orange;
}
.pu-my-plans-plan-date {
  color: $pu-orange;
  font-size: 11px;
  font-weight: 200;
}

I have tried every combination of styling the ionic 2 items as I can think of but the best I can get with this is to get a white background behind the ion-item. The ion-content has an image background but I can't get to see this through the ion-item.

Upvotes: 6

Views: 27829

Answers (8)

SkCODE
SkCODE

Reputation: 99

Try this in Ionic 5 using CSS Custom Properties.

For ion-item

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

For ion-list

ion-list {
    --ion-item-background: transparent;
}

Upvotes: 5

Jaseem Abbas
Jaseem Abbas

Reputation: 5230

This worked for me.

ion-item {
    --ion-item-background: transparent;
    box-shadow: none !important;
}

ion-list {
    --ion-item-background: transparent;
    box-shadow: none !important;
}

Upvotes: 0

Raghuram Sadineni
Raghuram Sadineni

Reputation: 613

Try this:

<ion-item color="transparent"> </ion-item>

Upvotes: 1

Devner
Devner

Reputation: 7235

Here is a solution in Ionic 4:

HTML:

<ion-list class="bg-transparent">
    <ion-item color="none" lines="none">
        Some random text
    </ion-item>
    <ion-item color="none" lines="none">
        Some random text
    </ion-item>
</ion-list>

CSS:

.bg-transparent {
  background: transparent;
}

Important things to note:

  • Set background color of the main list to transparent by applying the class and adding CSS as shown.
  • Add the color="none" attribute to each of the ion-item.
  • lines="none" remove the lines under each of the ion-item

That should do it!

Upvotes: 11

Gur Ji
Gur Ji

Reputation: 69

Create a new variable in variable.scss like this:

--ion-color-transparent: rgba(0, 0, 0, 0.0);

and use it like this:

<ion-item  color="transparent" padding="0px"><ion-input type="email" placeholder="username"></ion-input></ion-item>.

Upvotes: -1

Marko
Marko

Reputation: 957

For Android 

.item-md {
  background: transparent;
}

For iOS

.item-ios {
  background: transparent;
}

Upvotes: 8

user1752532
user1752532

Reputation:

For the ionic 2 item sliding background color you can change the main sass variable

 $item-ios-sliding-content-background(transprent);
 $item-md-sliding-content-background(transprent);

In your src -> theme -> variables.scss file

you can find all the variables here

Upvotes: 2

AishApp
AishApp

Reputation: 4162

You are using sliding item. Try using the below code

.pu-item-list ion-item-sliding{
  background: transparent !important;
}

Upvotes: 0

Related Questions