1

I have bootstrap popover in one of child component "child-component". Bootstrap styling and popover working fine over here but I would like to add custom styling.

I configured popover as below in "child-component.html"

[attr.data-trigger]="'click'"
[attr.data-toggle]="'popover'"
[attr.data-placement]="'top'"
[attr.data-container]="'child-component'"

I have styled it in "child-component.scss" as 

.popover {
    border: 1px solid #007CCA !important;
  }

  .popover.right .arrow:after {
    border-right-color: blue;
  }

this didn't worked so tried this 

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

This didn't worked either!!

HTML structure if that helps

<child-componet id="childComp">
<section>
    <div class="basicInfo">
        <div></div>
    </div>
    <div class="additinalComp">
        <div *ngIf="dataAvailable">
            <span>Total Amount</span><span>{{amount}}</span><i tabindex="{{i}}"
                        [attr.data-content]="info"
                        class="infoPopover"
                        [attr.data-trigger]="'click'"
                        [attr.data-toggle]="'popover'"
                        [attr.data-placement]="'top'"
                        [attr.data-container]="'child-component section'"></i>
        </div>
    </div>
</section>
</child-componet>

Also there like bootstrap over riding my style. as applied styling are not present on inspect dev tools. This .popover class with content appears only after click. I am using .scss in angular is there any way i can achieve that?

Mayank
  • 934
  • 1
  • 17
  • 37
  • Please provide the important part of your html, that should help to find the issue. Also check in the devTools if the default style is overriding your styles. Check the order of your styles imports. – The.Bear Feb 05 '19 at 17:20
  • 1
    @The.Bear added HTML structure, dev tool doesn't show up any applied styling or overriding by bootstrap . – Mayank Feb 05 '19 at 17:36

1 Answers1

2

I have used

::ng-deep

instead of

or

/deep/ or >>>

as

:host ::ng-deep .popover {
  border-right-color: blue;
}

This solved my problem.

Thanks a lot !

Orace
  • 7,822
  • 30
  • 45
Mayank
  • 934
  • 1
  • 17
  • 37