Open mrmokwa opened 1 year ago
It looks like this is caused by the ::before
, but I haven't found a way to fix it yet.
I saw similar issues and considered it as expected when using a div as container. If a span is used the newline in the markup doesn't contribute as a space
As odd as it seems, when adding a density manually with -1 or -2, the blank space is gone
@include mat.all-component-densities(-2);
I'm not sure what our desired behavior is, but it should be consistent across various densities
Here's a little work-around I'm trying out.
import { AfterViewInit, Directive, ElementRef } from '@angular/core'
@Directive({ selector: '[matListItemTitle],[matListItemLine]' })
export class MatListItemFixDirective implements AfterViewInit {
constructor(private readonly el: ElementRef<HTMLElement>) {}
ngAfterViewInit(): void {
this.el.nativeElement.innerHTML =
this.el.nativeElement.innerHTML.trim()
}
}
Using <span>
instead of <div>
can help to prevent prettier to add an unwanted new line :
<div matListItemTitle class="example-card-list-item-label">
Some label to display
</div>
<span matListItemTitle class="example-card-list-item-label"
>Some label to display</span
>
Any update on that? It is more than year since reported and soon 3 releases
.mat-mdc-form-field-error {
display: inline-flex;
}
Works for me btw
Encountered something similar like this while going from ng14 to 15 and I've just used an .trim() on the value. I believe it was on a MatSelectionList.
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
Description
In your html template, if you break line, a blank space will render inside the content of your list item line.
Actual Behavior
This Works, but my prettier configuration doesn't allow it
Environment