Sunday, 4 July 2021

Can't remove border from Angular2-wizard form stepper rendered html

I'm using angular2-wizard to create form wizards on my page. The way you add the wizard is with this custom element

<form-wizard>

and when it renders you have children that look like this enter image description here

Stackblitz - link

Problem - I want to remove the border around the "card" class that is the first div inside the 'form-wizard'. But I'm not having any luck with what I've tried.

Border shown here enter image description here

Here is what I've tried

styles: [
  `
    :host >>> form-wizard + div {
      border: none !important;
    }
    :host >>> form-wizard + div.card {
      border: none !important;
    }
    :host >>> form-wizard+div.card {
      border: none !important;
    }
    :host >>> form-wizard+div .card {
      border: none !important;
    }
    
    `
]
In my .CSS file

:host ::ng-deep form-wizard+div {
  border: none !important;
}

:host ::ng-deep form-wizard+div.card {
  border: none !important;
}

In styles inside component


from Can't remove border from Angular2-wizard form stepper rendered html

No comments:

Post a Comment