CODEWITHSUNDEEP
angularprimengangular7
Manzer A
Manzer A

Reputation: 3826

PrimeNg- Sidebar Module not displaying correctly

enter image description hereI am trying to create a right sidebar1 Navigation (which opens on click of btn1) and inside that there should open another sidebar Navigation from top(which opens on click of btn2) where sidebar2 should be outside overlay as long as it is opened.(overlay is not correct for each sidebar).

I am using this primeng link- https://www.primefaces.org/primeng/#/sidebar

https://stackblitz.com/edit/primeng-template-4gf9tj?file=app%2Fapp.component.html

Note:- when sidebar1 opens, a black backdrop is over full screen likewise when sidebar2 opens from top there should be black backdrop on sidebar1.

Upvotes: 4

Views: 12219

Answers (1)

Just code
Just code

Reputation: 13801

As per primefaces documentation.

baseZIndex -number - 0- Base zIndex value to use in layering.

You need to apply z-index as -1 to the layer, it is appearing to be on top of it.

like this

<button (click)="openTab()">btn1</button>
<p-sidebar class="menuPanel" [(visible)]="opened" position="right" [showCloseIcon]="true" autoZIndex="true" baseZIndex="-1">
Sidebar1
<button (click)="openTab2()">btn2</button>
    <p-sidebar class="menuPanel" [(visible)]="filterStatus" position="top" [showCloseIcon]="true" autoZIndex="false" baseZIndex="-1">
       sidebar2
    </p-sidebar>
</p-sidebar>

EDIT:

So, this seems to be not a problem with the primeng

I believe you forgot to include the theme style

I added 

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

as per stated here

and it works great now

here is the changed things

<button (click)="openTab()">btn1</button>
<p-sidebar class="menuPanel" [(visible)]="opened" position="right" [showCloseIcon]="true" autoZIndex="true" baseZIndex="99999">
Sidebar1
<button (click)="openTab2()">btn2</button>
    <p-sidebar class="menuPanel" [(visible)]="filterStatus" position="top" [showCloseIcon]="true" autoZIndex="false" baseZIndex="9999999">
       sidebar2
    </p-sidebar>
</p-sidebar>

DEMO

Upvotes: 0

Related Questions