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.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
Set to "clear" for a transparent button that resembles a flat button, to "outline" for a transparent button with a border, or to "solid" for a button with a filled background. The default fill is "solid" except inside of a toolbar, where the default is "clear" .
Example explained First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border - the div is transparent.
For Android
.item-md {
background: transparent;
}
For iOS
.item-ios {
background: transparent;
}
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:
color="none"
attribute to each of the ion-item.lines="none"
remove the lines under each of the ion-itemThat should do it!
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