cssangularangular-materialflexboxgrid

Make Angular Material Mat-Button-Toggle-Group responsive

I have a mat-button-toggle-group with 6 button-toggles. On Desktop all Buttons should be in one line. On smaller screens the group should break and display 2 lines of buttons like this: enter image description here

This is my code so far (i'm using flexbox-grid):

<mat-button-toggle-group class="col-xs-12">
      <mat-button-toggle class="col-xs-4 col-lg-2" value="1">1 Monat</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="3">3 Monate</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="6">6 Monate</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="12">1 Jahr</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="60">5 Jahre</mat-button-toggle>
      <mat-button-toggle class="col-xs-4 col-lg-2" value="120">10 Jahre</mat-button-toggle>
  </mat-button-toggle-group>

If works fine on desktop, but on mobile screen size, there are only 3 Buttons visible (the three that should be in the second line are not visible): enter image description here

How can I get my mat-button-toggle-group to break into two lines?

Solution

  • You have to set the flex-wrap property to wrap for the toggle-group element:

    mat-button-toggle-group {
  flex-wrap: wrap;
}

    Then just fix up the borders as you please.