CODEWITHSUNDEEP
htmlangulartypescriptangular-material
Piczon
Piczon

Reputation: 19

Angular Material Expansion Panel not working with different component

I am starting my journey with Angular Material and I'm stuck on one thing.

Expansion Panel is not working (I see this panel but I can't open/close it). I found out that it's not working because of "nav component" (created with material) which I am importing in this component (when I delete "nav component" expansion panel works).

And yes, I have used

import {MatExpansionModule} from '@angular/material/expansion';

This is component with Expansion Panel

<app-navigation-bar></app-navigation-bar>
<section id="faq">
  <h2>FAQ</h2>
  <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          This is the expansion title
        </mat-panel-title>
        <mat-panel-description>
          This is a summary of the content
        </mat-panel-description>
      </mat-expansion-panel-header>

      <p>This is the primary content of the panel.</p>

    </mat-expansion-panel>
</section>

And here is code of the "nav component"

<section id="navigation-bar">
  <mat-drawer-container class="example-container">
    <mat-drawer class="left-nav" mode="side" opened>
      <button class="nav-button"><i class="far fa-play-circle"></i></button>
      <button class="nav-button"><i class="fab fa-500px"></i></button>
      <button class="nav-button"><i class="fas fa-broadcast-tower"></i></button>
      <button class="nav-button"><i class="fas fa-film"></i></button>
      <button class="nav-button"><i class="fas fa-microphone"></i></button>
      <button [routerLink]="['/faq']" routerLinkActive="router-link-active"  class="nav-button"><i class="fas fa-info"></i></button>
      <button [routerLink]="['']" routerLinkActive="router-link-active"  class="nav-button" id="exit"><i class="far fa-times-circle"></i></button>

    </mat-drawer>
    <mat-drawer-content class="right">
    </mat-drawer-content>
  </mat-drawer-container>
</section>

And here is pic of it

Upvotes: 0

Views: 1975

Answers (1)

Piczon
Piczon

Reputation: 19

I figured it out. When you are making component just for an element on site, make sure it doesn't have width: 100%; it makes foil effect on the site (you can't click any button because all content is under this component).

Upvotes: 1

Related Questions