Search code examples
cssangularpanelprimeng

Changing icon style for primeNG p-panel

I have created a p-panel which is toggleable. As usual it has a button for expanding or collapsing it, but this icon acts as a button in the way that it gets selected when I click it.

I have disabled this property for buttons in css:

 button:focus {
    outline: none;
   box-shadow: none;
 }

I want to disable this property also for the icons of the panel but I have no idea how to do it. I have read something about ng-deep so I figure out I must do something like

::ng-deep .p-panel .p-panel-titlebar-toggler {
  outline: none;
   box-shadow: none;
}

That of course does not work. I have no idea further than this, any help is welcome.

Edit: Adding the html snippet:

<p-panel [toggleable]="true" [toggler]="'header'" [(collapsed)]="panelFuncionalidades" >
            <ng-template pTemplate="header">
                Panel de funcionalidades
            </ng-template>
            Here are some buttons and stuff that go inside the panel


    </p-panel>

the variable PanelFuncionalidades is a bollean in order to open and close the panel from other places.

About the desired output I just want to remove the circle which appears around the "expand" or "collapse" buttons which appears when clicked as is shown in this image

This circle disappers when you click outside it, but I want to avoid it appearing.

Solution

  • Add the CSS in your styles.css file

    .p-panel .p-panel-header .p-panel-header-icon:focus {
  box-shadow: none !important;
}

    Adding the working stackblitz link