CODEWITHSUNDEEP
angularprimengsidebar
Nicolas Bolo
Nicolas Bolo

Reputation: 3

Angular Primeng sidebar is transparent

I'm currently on an Angular 7 project with PrimeNg v7. I want to use the PrimeNg sidebar module but I can't manage to remove the transparent background and the shadow does not appear when it's open : What I get

I want it to be just like on the primeNg website : What I want

Here is my code : appcomponent.html

<!--The content below is only a placeholder and can be replaced.-->
<p-sidebar [(visible)]="display" [baseZIndex]="10000">
    <app-sidebar></app-sidebar>
</p-sidebar>

<button type="text" (click)="display = true" pButton icon="pi pi-plus" label="Show"></button>
<router-outlet></router-outlet>

app.module.ts :

@NgModule({
  declarations: [
    AppComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SidebarModule,
    ButtonModule,
    NgbModule
  ],
  providers: [{provide: 'pronosticServiceType', useClass: environment.pronosticServiceType}],
  bootstrap: [AppComponent]
})
export class AppModule { }

sidebar.component.html :

<div>
  <div>
    <a href="/home">Home</a>
  </div>
  <div>
    <a href="/Pronostics">Pronostics</a>
  </div>
</div>

Upvotes: 0

Views: 2234

Answers (1)

Amir Arbabian
Amir Arbabian

Reputation: 3699

I assume you need to include primeNg global styles into your project, if you use angular-cli you can do that in angular.json file into styles array of your project:

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],

If it won't help please leave a comment.

Upvotes: 2

Related Questions