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

[kroeder]

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

.mat-form-field-infix

Mat Select

mat-form-field

.mat-form-field-infix

Reproduction

StackBlitz Demo

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

[lordofdestiny]

Anything new on this? I have a similar problem, but for me mat-input is taller with appearance='fill'

[gvlekke]

Added stackblits for this problem: https://stackblitz.com/edit/stackblitz-starters-u3eqrevr?file=src%2Fmain.ts

a bit related but maybe not the cause of this problem.
when you change the height of a mat-form-field with --mat-form-field-container-height: 36px;
the mat-select doesn't respond to that because the .mat-mdc-select-arrow-wrapper has a fixed height of 24px that is not a variable.

So if you uncomment the code in global_styles.scss then you can see that the select is actually heigher then the input. I think the solution for that is to shrink it depending on the height or make also a variable of the mat-mdc-select-arrow-wrapper

should i open a new ticket for that problem?

[crisbeto]

We are closing this issue, because we've determined, using a semi-automated process, that it is no longer relevant, has low engagement, or it does not have enough information to proceed. Feel free to comment if you think the issue should be reopened, or open a new issue with the latest version of our code instead.

[gvlekke]

it is still relevant because of this line:

.mat-mdc-select-arrow-wrapper {
  height: 24px;
  ...
}

components/src/material/select/select.scss

Line 93 in ab21f78

height: 24px;