How can I override the style of a popover?

[hesparza]

I have a popover in my component but it doesn't display correctly when I include the text on it. The text is overflowing the popover, I need the text not to be wrapped.

By doing my search on the internet, this is a common problem which gets solved by overriding the popover property "max-width" to be 100%, I proved that in the browser's debugger and it works. The problem is that I don't seem to be able to set/override this property from my component's css file.

I have tried:
.popover { max-width: 100%; }

and

.popover-content { width: 100%; }

and

.popover-content, .popover-content .body { width: 100%; }

None of them have worked, any thoughts?

[hesparza]

Ok, I managed to do it by setting the body as the container of the popover:

container="body"

Then I added the next css to the global style of my application:

.popover { max-width: 100% !important; }

I really don't like the idea of using !important in any of my app's css though, that's like the last resource. I would appreciate if you guys have better ideas.

[exedor]

Lucky you. I can't get it to work even with container="body" AND using !important.

[mechu]

Try to use

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          color: #000;
          max-width: 100%;
        }
    `]
})

[RaviNags]

@mechu solution is working (solution write on the documentation).

but how to do if you are using an external styling file ?

@Component({
  selector: 'pr-test',
  templateUrl: './pr-test.component.html',
  styleUrls: ['./pr-test.component.scss']

})

my pr-test.component.scss file ->

:host >>> .popover {
  background-color: #009688;
  color: #fff;
}
:host >>> .popover>.arrow:after {
  border-top-color: #009688;
}

Thanks

[1-0-1]

:host doesn't help when container is body. :host gets applied to the container of the link used to initiate the popover. There is no way to apply styles to multiple popovers on a page.
An older popover had a popover-class that assigned a class to the popover container. Can you bring that back?

[h6784rfg6]

RaviNags, use

:host {
   /deep/ .popover {
     background-color: #009688;
     color: #fff;
   }
}

Had also some issues with >>> it is somehow not more supported, but /deep/ works like a charm.

[mkeith121]

@h6784rfg6 That worked well for me.

Does anyone know if there is a more supported way at this point? I see that there is a "containerClass" input, but I wasn't able to successfully access that class from a "styleUrl" linked .scss doc.

[KellyVillalobos]

@mechu awesome!! couldn't figure out how to target a class created after compilation in Angular. Your solution hit the spot. Now I know how to do it. 🙌🏻

[GautamPanickar]

Try to use

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          color: #000;
          max-width: 100%;
        }
    `]
})

This worked for me. Thanks.

[robtong21]

/deep/ did not work for me using .scss file in Angular 9. Anything else???

[charlenebuena]

Nothing is working for me from the aforementioned as well. Working with Angular 9

[KokalaBhanusri]

@robtong21 you can try

:host ::ng-deep .popover {
background-color: #009688;
color: #fff;
}

/deep/ is not working now.

[1-0-1]

Have you tried using "containerClass" and setting a custom class for it?

[Mohd-umair]

@component({
selector: 'app-message-report',
templateUrl: './message-report.component.html',
styleUrls: ['./message-report.component.scss'],
encapsulation: ViewEncapsulation.None,
styles: [.popover { width:500px; }]})

Use Encapsulation => ViewEncapsulation.None in the Ts file like the example showing above, this will 100% work