Struggling to adjust the height of an md-button has been quite frustrating for me. It's been hard-coded to be 25px high within the <button-container> element, but the hover animation still overflows this set height, as shown here: https://i.sstatic.net/1xTT1.png
Adding a 25px height to the buttons themselves seems to cause an offset in the content, like this: https://i.sstatic.net/dOxGg.png
Does anyone know how to write a style that can correct this behavior? It's puzzling why hard-coding a height into the button results in the text dropping to the bottom.
Below is my HTML:
<div id="buttons-container">
<button
md-button
id="add-track-button"
(click)="addTrack()"
>
<md-icon>add</md-icon>
<span>Add Track</span>
</button>
<button
md-button
id="delete-track-button"
[disableRipple]="true"
[disabled]="this.tracksArray.length === 0"
(click)="toggleDeleteTrackMode()"
>
<md-icon>delete</md-icon>
<span>Delete Tracks</span>
</button>
<button
md-button
id="add-marker-button"
[disableRipple]="true"
(click)="toggleAddMarkerMode()"
>
<md-icon>add</md-icon>
<span>Add Marker</span>
</button>
<button
md-button
id="add-frame-span-button"
[disableRipple]="true"
(click)="toggleAddFrameSpanMode()"
>
<md-icon>add</md-icon>
<span>Add Span</span>
</button>
</div>
Below is my CSS:
#buttons-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
height: 25px;
color: black;
background-color: grey;
button {
font-size: 10px;
// If this line is commented out, the text is aligned fine but the hover animation overflows
// If it isn't, the content offsets to the bottom like in the picture above
height: 25px;
padding: 0px 2px;
md-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
}
#add-marker-button {
md-icon {
color: $marker-color;
}
}
#add-frame-span-button {
md-icon {
color: $frame-span-color;
}
}
}