angular / angular/components

bug(mat-select): has different height than matInput

Đang mở
#24,446 4 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: material/select 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?

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

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

13.2.3

### Description

If you render a mat-input and a mat-select component next to each other you can see that mat-select is slightly higher than the mat-input. This is a specific `appearance="outline"` issue. Using `appearance="fill"` the height is the exact same. (see https://material.angular.io/components/form-field/examples)

## Mat Input

### mat-form-field

![image](https://user-images.githubusercontent.com/5478899/154712545-7fea10e1-2e5d-49ce-af3f-c0b2f50b123a.png)

### .mat-form-field-infix

![image](https://user-images.githubusercontent.com/5478899/154712890-092184bd-cc86-41c4-824f-3198eaad53c0.png)

## Mat Select

### mat-form-field

![image](https://user-images.githubusercontent.com/5478899/154712628-de0abce8-fb92-4e46-9432-360335ee21d5.png)

### .mat-form-field-infix

![image](https://user-images.githubusercontent.com/5478899/154712984-8c5a44b7-827d-4bdc-9f2e-9d4930baec0f.png)

### Reproduction

[StackBlitz Demo](https://stackblitz.com/edit/angular-u1v9f4-pne1zy?file=src%2Fapp%2Fform-field-overview-example.html
)

### Expected Behavior

All form components should have the same height.

### Actual Behavior

The height is different when using `appearance="outline"`

### Environment

- Angular: 13.0.x
- CDK/Material: 13.2.3
- Browser(s): Chrome 98.0.4758.102
- Operating System Windows

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

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

Hướng nghiên cứu

Start with the linked StackBlitz reproduction, especially src/app/form-field-overview-example.html, and compare the mat-form-field markup for matInput and mat-select with appearance="outline". Done means both controls render at the same height while the existing appearance="fill" behavior remains unchanged.

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
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
52/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.