Content going beyond material expansion panel

Issue

I’m using Material Expansion Panel to hold some content, when the expansion panel is opened (expanded) I’m trying to display 2 columns of data in checkboxes. It seems to be working fine but when I add a css class to both the columns so that they sit side by side the expansion panel does adjust to the size and they two columns go straight off the edge.

<mat-accordion>
   <mat-expansion-panel>
      <mat-expansion-panel-header>
        Some header
      </mat-expansion-panel-header>

      <div class="col-1">
         <div *ngFor="let firstname of people.names">
            <mat-checkbox (change)="changeFunction(firstname)">
               {{ firstname }}
            </mat-checkbox>
         </div>
      </div>

      <div class="col-2">
         <div *ngFor="let school of people.schools">
            <mat-checkbox (change)="changeFunction(school)">
               {{ school }}
            </mat-checkbox>
         </div>
      </div>
   </mat-expansion-panel>
</mat-accordion>
.col-1 {
   width: 50%;
   float: left;
}

.col-2 {
   width: 50%;
   float: right;
}

If I remove the classes (col-1 and col-2) from the divs then the content fits fine on the expansion panel, as in the panel adjusts to the length of the content. But with the classes the panel doesn’t stretch and the content goes straight off the panel… Any help here would be greatly appreciated.

Solution

I would go for flex in this case

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header> Some header </mat-expansion-panel-header>
    <div class="panel-container">
      <div>
        <div *ngFor="let firstname of people.names">
          <mat-checkbox (change)="changeFunction(firstname)">
            {{ firstname }}
          </mat-checkbox>
        </div>
      </div>

      <div>
        <div *ngFor="let school of people.schools">
          <mat-checkbox (change)="changeFunction(school)">
            {{ school }}
          </mat-checkbox>
        </div>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>

And the css for it:

.panel-container {
  display: flex;
}

.panel-container * {
  flex-grow: 1;
}

Answered By – Octavian M─ârculescu

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.