Incorporating Angular, Angular Material, and Angular Flex-Layout, I have designed a collection of links that resemble cards or tiles. The links initially display an icon and title but transition to show informational text upon hovering.
However, for links with extensive informational text, this state change is causing the items to increase in height.
To address this issue, I attempted setting a min-height using percentages instead of pixels, such as 110%. Unfortunately, this did not alter the size of the links. The same outcome was observed for the containing div named .container.
Below is a snippet:
<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
<a mat-flat-button color="primary" fxFlex href="https://example.com/footprints">
<div class="hoverOff"><fa-icon [icon]="faToolbox"></fa-icon>Broken</div>
<div class="hoverOn">Is your request impacting a business-critical function affecting daily production?</div>
</a>
<a mat-flat-button color="primary" fxFlex href="https://example.com/divisions/dev/Lists/Requests/NewForm.aspx?isProject=Yes">
<div class="hoverOff"><fa-icon [icon]="faPuzzlePiece"></fa-icon>Project</div>
<div class="hoverOn">Is your request related to a new product or service?<br>
Does it require an RFI or RFP process?<br>
Is it necessary for more than 500 internal resource hours?<br>
Involves costs exceeding $100,000?<br>
Pertains to a new banking center or remodel?<br>
Related to a new partnership, divestiture, or branch closure?
</div>
</a>
</div>
<style>
.mat-flat-button {
white-space: normal;
line-height: normal;
}
a {
color: white !important;
display: flex;
justify-content: center;
align-items: center;
}
fa-icon {
display: block;
font-size: 75px;
}
.mat-primary {
background-color: #00539B !important;
}
a .hoverOn {
display: none;
}
a:hover .hoverOn {
display: block;
}
a:hover .hoverOff {
display: none;
}
</style>
I have provided a demonstration on StackBlitz.
Any suggestions on how I can resolve the height adjustment issue without resorting to hard-coded pixel values?