CODEWITHSUNDEEP
cssionic-frameworkionic4
user6554254
user6554254

Reputation: 87

How do I remove white background from ion-items in ionic 4?

I am having massive problems styling my ionic 4 mobile app layouts. It took a while for me just to find out how to set a background image for the app, but now I am getting a white rectangle wherever I put an ion-item tag. ive tried setting the ion-item {background: transparent important!} (in page scss) but its not working. I am a complete beginner to ionic!

register.page.scss

:host { ion-content {
--background:none;
background: url('../../assets/imgs/hoghi/bg.jpg')  no-repeat 100% 100%;
background-size: cover;
background-position: center center;

ion-item {
  background-color: transparent !important;
  background: transparent !important;
  opacity:1;
}//end of item}//end of content}//end of :host

register.page.html

<ion-content>
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input></ion-input> 
  </ion-item>
</ion-content>

This is the output im getting.. the input works fine.

Upvotes: 3

Views: 4216

Answers (1)

Dylan
Dylan

Reputation: 208

You should try using the Shadow DOM variables to achieve that.

Ionic components' styles are customizable using these variables.

Get more info for ion-item here

Following your code that would be:

ion-item {
  --background: none;
  opacity:1;
}

More information on Shadow DOM

You can always find these variables at the end of the page in each component's documentation

Upvotes: 10

Related Questions