angular / angular/components

bug(mat-dialog): mat-dialog-title adds a space in front of the header text when HTML is formatted

Đang mở
#26,539 7 bình luận 20 reaction 0 người được giao Xem trên GitHub
area: material/dialog P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

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

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

14

### Description

When using a header tag as a mat-dialog-title, there is a space at the beginning of the title, resulting in the dialog title not being aligned with the content:

image

This only happens if the content of the header tag in the HTML file is placed on a new line.

When using a header tag that contains a long expression, the default formatting (by Prettier, for example) puts the content of the header tag on the next line (as header tags are block elements), like so:

```


{{ getTitleThisFunctionHasAVeryLongNameSoPrettierPutsItOnANewLine() }}


```

This results in a space being inserted in the HTML. However, since the browser ignores whitespace at the beginning of the element, the space is not visible (cf. HTML spec).

Sinde Material 15 however, elements containing `mat-dialog-title` have a `::before` element. This element causes the browser to render the whitespace, which is inconsistent with default browser behavior and default formatting for block elements.

### Reproduction

Steps to reproduce:
1. Create a mat-dialog
2. Add a header tag with mat-dialog-title
3. As a header text, insert an expression that is quite long, causing Prettier to put it on the next line

The problem is illustrated in [this Stackblitz](https://stackblitz.com/edit/angular-copgcv?file=src/app/dialog-content-example-dialog.html).

Removing the `::before` element of the `mat-dialog-title`, removes the whitespace, but causes the header height to be too small.

### Expected Behavior

No whitespace should be visible, according to default behavior of both the browser and block element formatting.

### Actual Behavior

Whitespace is visible at the beginning of the title.

### Environment

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với StackBlitz được liên kết và bản tái hiện trong src/app/dialog-content-example-dialog.html, sau đó kiểm tra các kiểu của mat-dialog-title liên quan đến phần tử ::before. Bản sửa hoàn tất khi một header được định dạng trên nhiều dòng không hiển thị khoảng trắng ở đầu mà vẫn giữ đúng chiều cao tiêu đề.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.