Decrease height of mat-button-toggle to match buttons

user_4964239 0
Viewed 11151

I got an Angular Flex-Layout row which contains some buttons and a mat-button-toggle-group. Unfortunately, the mat-button-toggle-group is somewhat bigger than the buttons and I would like to have them all on the same height / line-height.

This is hot it looks currently: Screenshot

Tried to meddle with the css classes of mat-button-toggle-group and others, but only got to so far as to reduce the button height while the content stayed the same.

  <div fxLayout="row wrap" fxLayoutAlign="space-between end">
    <div>
        <div fxLayout="row wrap" fxLayoutAlign="space-between end">
          <div class="control-buttons">
            <button
              mat-stroked-button
            >
              <i class="material-icons">skip_previous</i>
            </button>    
            ( more buttons )
        </div>
    </div>
    <div>
        <div fxLayout="row wrap" fxLayoutAlign="space-between end">
            <mat-button-toggle-group multiple>
                  <mat-button-toggle
                    value="random"
                  >
                    <i class="material-icons">
                      shuffle
                    </i>
                    <span class="only-on-big-screen">
                      random
                    </span>                
                  </mat-button-toggle>    
                  ( more buttons )
              </mat-button-toggle-group>
          </div>
    </div>
  </div>
angular-material
3 Answers

Another workaround would be to do this:

.mat-button-toggle-group {
  height: 32px;
  align-items: center;
}
user_91781910

You can change the height by adding custom styles. You have to change the line-height of the class mat-button-toggle-label-content.

.mat-button-toggle-label-content {
    line-height: 32px !important;  <-- set you height here
}
user_112587350

What worked for me was reducing the line-height of the content and adjusting height of the buttons in a global style file.

.mat-button-toggle-button {
 height: 2rem; // the modified height that I wanted.
}

.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
  line-height: 1rem; // default value is 48px. I wanted the height to be 2rem, but had to adjust this line-height to 1rem so that the icons were vertically centered.
 }
user_25194760
Related