CODEWITHSUNDEEP
angularangular-material
Simon
Simon

Reputation: 3264

How to theme Angular Material to be more compact

I'm using Angular Material 7, and find the gutter spacing of the mat-form-field et. al. to be too large. On the desktop, the information density is very low. I'd like to adjust this using theming, but Google only leads me to tutorials describing how to change colors. Does anyone have advice on how to make the spacing more compact without debugging dozens of Material css directives?

Upvotes: 4

Views: 6175

Answers (3)

LKarma
LKarma

Reputation: 1031

You can set up density level at your theme definition like this:

$app-light-theme: mat-light-theme((
  color: (
    primary: $mat-primary-palette,
    accent: $mat-accent-palette
  ),
  density: -3
));

See: https://material.angular.io/guide/theming-your-components#3-include-the-theme-mixin-in-your-application

Upvotes: 1

Wildhammer
Wildhammer

Reputation: 2175

Material design has different density levels, Angular team finally implemented this and it is now an experimental feature in Angular 10 release.

Upvotes: 2

Md. Imrul Islam
Md. Imrul Islam

Reputation: 318

If you don't want to use css for your grid gutter size, you can use angular material with flex-layout and easily set your gutter size using fxLayoutGap="16px or 20px". Here is the link fxLayoutGap API.

Upvotes: 0

Related Questions