CODEWITHSUNDEEP
angulardrop-down-menuangular-materialthemesangular-material-theming
Konrad
Konrad

Reputation: 4802

Material Design compact: Select / DropDown doesn't react on density

I use Material design in my Angular app.

Some elements like the mat-select have a very high density - these elements are anything but compact.

The common way to render the layouts more compact in Material design is the density-property of the theme.

I tried different ways to the the density - and it applies fine for buttons and other elements. But the mat-select stays big as always.

Using of mat-select:

<mat-form-field appearance="fill">
    <mat-label>Granularität</mat-label>
    <mat-select [(value)]="this.settings.granularity">
        <mat-option value="day">täglich</mat-option>
        <mat-option value="week">wöchentlich</mat-option>
    </mat-select>
</mat-form-field>

Try 1 (no effect):

@include mat.select-density(-3);

Try 2 (density for complete theme, no change for mat-select):

$my-app-theme: mat.define-light-theme((
        color: (primary: $my-app-primary, accent: $my-app-accent, warn: $my-app-warn),
        typography: mat.define-typography-config(),
        density: -3,
    ));

mat-select unchanged big:

enter image description here

Upvotes: 2

Views: 1462

Answers (4)

Andy
Andy

Reputation: 7117

Per Material 2 spec, this should not be done:

Tasks and alert-based components should not increase density.

Don’t increase the density of components that involve focused tasks, such as interacting with a dropdown menu or picker. Increasing density on components such as date pickers reduces usability by limiting tappable space.

https://m2.material.io/design/layout/applying-density.html#usage

Upvotes: 1

Experimenter
Experimenter

Reputation: 2477

mat.form-field-density seems to work:

scss:

@use '@angular/material' as mat;

.density-settings-1 {
  @include mat.form-field-density(-1);
}

.density-settings-2 {
  @include mat.form-field-density(-2);
}

.density-settings-3 {
  @include mat.form-field-density(-3);
}

.density-settings-4 {
  @include mat.form-field-density(-4);
}

.density-settings-5 {
  @include mat.form-field-density(-5);
}

html:

<div class="density-settings-5">
  <mat-form-field appearance="outline">
    <mat-label>Select</mat-label>
    <mat-select>
      <mat-option value="one">First option</mat-option>
      <mat-option value="two">Second option</mat-option>
    </mat-select>
  </mat-form-field>
</div>

package.json:

"@angular/core": "^15.2.10",
"@angular/material": "15.2.9",

Links:

Upvotes: 1

Leandro Matilla
Leandro Matilla

Reputation: 1011

mat-select does not yet support density.

Here are the components that do provide density Sass mixins:

  • Button
  • Checkbox
  • Chip
  • Data
  • Table
  • Icon
  • Button
  • List
  • Radio
  • Switch Tab Bar
  • Text Field

See https://m2.material.io/develop/web/supporting/density

Upvotes: 1

Brian
Brian

Reputation: 21

I just encountered the same problem using angular material v15.2.3. It seems that the correct styling was added with this commit: https://github.com/angular/components/commit/d0cd9bb3ec1552c67797d0b063db7732d211a815

In my installed version, the density mixin in src/material/select/_select-theme.scss looks as follows:

@mixin density($config-or-theme) {}

No wonder it has no effect...

So, upgrading to the newest version might be the solution

Upvotes: 1

Related Questions