CODEWITHSUNDEEP
htmlcssionic-framework
Rajitha Perera
Rajitha Perera

Reputation: 1621

Changing background color of Ionic ion-item in CSS

I have added the following code style="background-color: #C2A5A5 !important. But that has not worked for me. how can I add background color to ion-item?Thanks in advance.

<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl"  ng-click="openShareModel(detail)">
    <img ng-src="{{profilepic.profileimageurl}}">

    <h2>{{detail.date | date :'fullDate'}}</h2>
    <h2>{{detail.title}}</h2>
    <p>{{detail.description}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">
      Delete
    </ion-option-button>

  </ion-item>

Upvotes: 31

Views: 126229

Answers (13)

user2723329
user2723329

Reputation: 101

Here's the latest solution:

ion-item {
  --ion-item-background: #ddd;
}

Upvotes: 7

Bojan
Bojan

Reputation: 21

There is a newer solution.

<ion-item
    [style.--background]="yourColor"
  >
   //dummy
  </ion-item>

Upvotes: 2

mani kandan
mani kandan

Reputation: 439

You shall use this method. It worked for me.(ion-item needs a inner element to hold the value)

<ion-item class="inv_adj_menu"><div>View Details</div></ion-item>
<ion-item class="inv_adj_menu"><div>View Lines</div></ion-item>
<ion-item class="inv_adj_menu"><div>Validate Inventory</div></ion-item>

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202346

Now you can use the appStyleProperty property of ion-item this way:

<ion-item
  [appStyleProperty]="{ background: someColor }"
>
</ion-item>

Upvotes: 0

Shoter Developer
Shoter Developer

Reputation: 401

I want to share my solution:

I use the custom CSS properties of ionic 4, so if I want to change the background color I can create a new class called ".item-background-color" and change the color of the CSS property that I want to modify. For example:

my-page.page.scss

.item-background-color{
    --ion-item-background:#015f01d5;
}

then, I only add my new class to the ionic item:

my-page.page.html

<ion-item class="item-background-color">
    My item with new background color
</ion-item>

What is done is to change the variable that affects the color of the ionic item, so you can add all the classes you want, dynamically or not, and change the values of their respective variables. You can find information about the variables at CSS Custom Properties

I hope my answer is helpful to people who need to modify the CSS properties of ionic 4 components, sorry for my bad english and good luck!

Upvotes: 40

Ashish
Ashish

Reputation: 2068

Ionic4 provides color property to give background-color

e.g.

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

More theming property available here https://ionicframework.com/docs/theming/basics

Reference doc : https://ionicframework.com/docs/api/item

Upvotes: 6

Zafer BAHADIR
Zafer BAHADIR

Reputation: 109

I created a color scheme in variable.scss

.ion-color-newcolor {
  --ion-color-base: #224068;
  --ion-color-contrast: #56b4d3;
}

Using:

<ion-item color="newcolor">
  <ion-label position="stacked">Name: </ion-label>
  <ion-input required type="text"></ion-input>
</ion-item>

View:

Upvotes: 4

Ahmed Abuamra
Ahmed Abuamra

Reputation: 213

Simply, use colors in variables.scss file (you can also define new colors) like that

$colors: (
 primary:    #f9961e,
 secondary:  #882e2e,
 danger:     #f84e4e,
 light:      #f4f4f4,
 dark:       #222,
 newColor:   #000000,
);

and in your html file:

 <ion-item color='newColor'>
    Test
 </ion-item>

Upvotes: 14

AmitNayek
AmitNayek

Reputation: 178

<ion-item>
  <div class="item-content">
  </div>
</ion-item>
The Ionic CSS contains a CSS property:
.item .item-content {
background-color: transparent !important;
}

its apply on child dom of <ion-item>. We can use can use div class='item-content', but if we won't all the css(.item-content) property would apply to the <ion-item> child elements like if we use

<ion-item>
   Something   //all css will apply into it 
</ion-item>
.item .item-content {
background-color: transparent !important;
}

I'm not able to comment that's why I am writing over here.

Upvotes: 0

Keerthesh
Keerthesh

Reputation: 77

In Ionic3, below css will do the trick.

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

Upvotes: 0

Nghia Tran
Nghia Tran

Reputation: 819

A workaround is using <a> tag instead of <ion-item> tag, for example: change <ion-item> to <a class="item"> and then style it with whatever you want.

Source: http://ionicframework.com/docs/components/#item-icons

Upvotes: 1

Kailas
Kailas

Reputation: 7578

Actually got it working in a different way:

.item-complex .item-content { background-color: #262B32 !important; }

as suggested by @gylippus here in post #5

Upvotes: 4

Brett DeWoody
Brett DeWoody

Reputation: 62901

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.

Upvotes: 33

Related Questions