I'm having a strange problem with Internet Explorer 11. Here I use a button toggle group in vertical direction and if the user clicks one one of the buttons in the group, the height changes a little bit (of the clicked button). The example code is based on this source:
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" vertical>
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
One button is rendered as:
<mat-button-toggle tabindex="-1" class="mat-button-toggle mat-button-toggle-appearance-standard mat-button-toggle-checked" id="mat-button-toggle-1" ng-reflect-value="bold" value="bold" _ngcontent-yuh-c0="">
<button name="fontStyle" tabindex="0" class="mat-button-toggle-button" id="mat-button-toggle-1-button" aria-pressed="true" type="button">
<div class="mat-button-toggle-label-content">Bold</div>
</button>
<div class="mat-button-toggle-focus-overlay"/>
<div class="mat-button-toggle-ripple mat-ripple" matRipple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"/>
</mat-button-toggle>
If I look into the CSS mat-button-toggle-focus-overlay and mat-button-toggle-ripple mat-ripple get a height of 52px instead of 48px. This increases the size of the parent element too.
I can disable the font-family attribute of .mat-button-toggle and on enabling it again the elements get back to their original sizes (48px).
What could be the reason for the change in height of the clicked button and is there anything I could do? This is only happening on IE.
This sounds to me like an issue caused by whitespace between the tags of the clicked button. Try removing all whitespace between tags and see if that removes the extra 4px. If that is the issue you may be able to solve it by using display:block.
Put this into your styles.css:
.mat-button-toggle-button { display: block; }