CODEWITHSUNDEEP
cssangularangular-materialgridresponsive
Juan
Juan

Reputation: 2084

How to use angular material buttons with CSS grid

I was trying to use Angular material with CSS grid system.

I have this code to the html that displays two buttons, one standard html button and the other uses the CSS class of Angular material:

<div class="grid">  
    <button mat-raised-button color="primary">ANGULAR BUTTON</button>
    <button>HTML BUTTON</button>
</div>

And this CSS class to the grid system:

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
    grid-auto-rows: minmax(200px, auto);
    margin: 50px;
}

This appears to work fine, but when I resize the browser screen to a minor width value, the text in the Angular button doesnt fit into the button's container but the standard html button's text does. So I think the problem is in the class applied to the Angular button.

How can I solve this issue and get the standard html button's behaviour on the material button?

Images attached with the exposed behaviour.

Result with full screen size

Result with resized screen

Upvotes: 1

Views: 1867

Answers (1)

VagrantAI
VagrantAI

Reputation: 670

Due to Material Design guidelines buttons were never considered to be multiline, but implementing this kind of behavior is not that complicated: add white-space: initial; to button style and you're ready to go. See StackBlitz example

Upvotes: 2

Related Questions