angular / angular/components

bug(COMPONENT): Global density cant be set in angular material 15 mdc

Open
#26,208 12 comments 2 reactions 0 assignees View on GitHub
P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

v14.2.7

### Description

New input fields appear super big compared to previous versions.

Setting global density does not work:

@include mat.all-component-densities('maximum');
or
@include mat.all-component-densities(-3);

or setting it directly inside the theme.

It all does not have any effect.

### Reproduction

Steps to reproduce:
1. use angular material 15
2. use any kind of text input
3. try making it smaller by setting global density higher

### Expected Behavior

Form fields scaling up or down in size

### Actual Behavior

No effect

### Environment

- Angular: 15.0.3
- CDK/Material: 15.0.2
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in Angular 15 with a text input and the documented mat.all-component-densities mixin, including the theme-level setting. Trace the density and theme entry points to determine why the setting has no effect; done means form fields visibly scale up or down as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.