bug(material/form-field): A density of -2 or lower breaks labels

[marc-wilson]

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

No response

Description

When setting a density of -4 on a form field with a matSuffix, the text is not aligned.

density -4

density 0

Reproduction

StackBlitz link: https://stackblitz.com/edit/uprkxp?file=src%2Ftheme.scss
Steps to reproduce:

1. Set density of -4
2. Observe how input text is not vertically aligned any longer

Expected Behavior

Input text should always be vertically aligned, regardless of density.

Actual Behavior

Density -4 does not vertically align input text

Environment

Angular CLI: 15.1.6
Node: 18.13.0
Package Manager: npm 8.19.3
OS: darwin x64

Angular: 15.1.5
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1501.6
@angular-devkit/build-angular 15.1.6
@angular-devkit/core 15.1.6
@angular-devkit/schematics 15.1.6
@angular/cli 15.1.6
@schematics/angular 15.1.6
rxjs 7.8.0
typescript 4.9.5

[marc-wilson]

From the looks of it, it seems this is an issue because the mat-icon/matSuffix does not scale with the density.

But, if I set density for mat icon (mat.icon-density(-4)), it has no impact because that leads to an empty mixing

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

Is there some parent thing that sets the icon density or am I going doing the wrong path?

[wagnermaciel]

Bug still exists on 16.1.5

[kharazian]

The problem at hand is how the app handles low-density settings, especially when it's set to -2 or lower. This causes text in form fields to become misaligned. Here's what's happening:

1. The app adjusts the height of form fields based on the chosen density setting, using a formula that considers this value.
   

   components/src/material/form-field/_form-field-density.scss

   Lines 43 to 44 in ccff68c

   	// Height of the form field that is based on the current density scale.
   	$height: mdc-density.prop-value(

2. The app has a rule that decides when to hide labels in filled form fields, and it depends on the calculated height. If the height becomes smaller than a certain minimum value, the labels are hidden.
   

   components/src/material/form-field/_form-field-density.scss

   Lines 50 to 52 in ccff68c

   	// Whether floating labels for filled form fields should be hidden. MDC hides the label in
   	// their density styles when the height decreases too much. We match their density styles.
   	$hide-filled-floating-label: $height < mdc-textfield.$minimum-height-for-filled-label;

3. When you set a density of -2 or lower, the calculated height drops below this minimum value, causing the labels to become invisible.
   

   components/src/material/form-field/_form-field-density.scss

   Lines 101 to 110 in ccff68c

   	// MDC hides labels for filled form fields when the form field height decreases. We match
   	// this behavior in our custom density styles.
   	@if $hide-filled-floating-label {
   	// Update the spacing for filled form fields to account for the hidden floating label.
   	@include _infix-vertical-spacing-filled(
   	$no-label-padding, $no-label-padding);
   	.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
   	display: none;
   	}
   	}

You can find a more detailed explanation of this issue in #26579.

[CrlsMrls]

As described in bug(form-field): mat-label disappears when density < -1 #26579

You can visualize this issue in this URL: https://angular-material-density.netlify.app/
Source code: https://github.com/CrlsMrls/angular-material-component-densities

[xanaxan]

1. What is the density setting for 'Density minimum' in https://angular-material-density.netlify.app/ ?
   -- ok...i see, there is a 'minimum' value.
2. I'm also confused about the empty mixin for density in _icon-theme or _fab-theme. An icon which is placed in the input field (matSuffix or matIconSuffix) is not affected by densitiy settings.

[mtpultz1977]

Is there a work around that can be applied for prefix, suffix, and to the date-picker toggle so the calendar icon scales with the form-field density? The inputs are comically large and we want a density of -4, but it misaligns all the values in the date picker input, and anything using the prefix/suffix.

[thanecoder]

Any work around on this, Radio button label is breaking on density < -2

[hasokeric]

Just ran across this