Why styling is not applying to my elements? - css

Question

I have an angular app in which i have my nested dropdown menu. And in one of the list item i have primeng Tabview in that list item like this
<li *ngIf="user.role !== 'super'" class="nav-item flex-center-center flex-column min-width-40 no-border custom-bell-padding notifications-dropdown">
<a class="nav-link" id="notificationsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true">
<i class="fal fa-bell font-26"></i>
</a>
<div class="dropdown-menu" aria-labelledby="notificationsDropDown" (click)="onClick($event)">
<span class="dropdown-menu-arrow"></span>
<div class="ui-g header-dropdown-list">
<div class="ui-g-12 list-item-border-bottom">
<div class="ui-g-6">
<p class="font-11 pb-0">Your Notifications</p>
</div>
<div class="ui-g-6 font-11 text-right">
<app-checkbox [disabled]="disabled" label="Technician updates" [isChecked]="true"></app-checkbox>
</div>
</div>
<div class="ui-g-12">
<p-tabView class="tab-panel-underline">
<p-tabPanel header="All">
<ng-template pTemplate="content">
</ng-template>
</p-tabPanel>
<p-tabPanel header="Critical">
<ng-template pTemplate="content">
</ng-template>
</p-tabPanel>
</p-tabView>
</div>
</div>
</div>
Now i am applying custom styling in component.scss like this
.notifications-dropdown{
.dropdown-menu {
left: 843px !important;
margin: -0.875rem 0 0;
font-size: 0.875rem;
color: #7A8281;
text-align: left;
list-style: none;
border: 0 solid #c8ced3;
box-shadow: 0px 3px 6px #00000029;
z-index: 99999;
top: 74px;
border-radius: 0px;
width: 20rem;
/* min-width: 18.2rem; */
/* right: 0px; */
.header-dropdown-list{
// height: 150px;
.list-item-border-bottom{
border-bottom: 1px solid #e5e6e6;
}
p-tabview.tab-panel-underline {
.ui-tabview{
padding: 20px !important;
.ui-tabview-nav li{
width: 50% !important;
padding: 0px !important;
}
}
}
}
}
But my styling is not applying on primeng tabview. I have this tabview inside of my main list item i.e li and applying some padding and width of li of primeng tabview but it's not applying my custom styles.

Answer 1

I have fixed this issue. The problem was causing due to ViewEncapsulation. My problem solved when i put ViewEncapsulation.None inside my component.

Answer 2

You can use ng-deep and & opertor in scss which refrence to parent class.
::ng-deep .notifications-dropdown{
.dropdown-menu {
left: 843px !important;
margin: -0.875rem 0 0;
font-size: 0.875rem;
color: #7A8281;
text-align: left;
list-style: none;
border: 0 solid #c8ced3;
box-shadow: 0px 3px 6px #00000029;
z-index: 99999;
top: 74px;
border-radius: 0px;
width: 20rem;
/* min-width: 18.2rem; */
/* right: 0px; */
.header-dropdown-list{
// height: 150px;
& .list-item-border-bottom{
border-bottom: 1px solid #e5e6e6;
}
& p-tabview.tab-panel-underline {
& .ui-tabview{
padding: 20px !important;
& .ui-tabview-nav li{
width: 50% !important;
padding: 0px !important;
}
}
}
}
}