Select should adjust height when font-size changes

[kara]

Currently when you change the font size of the select to override the default font size, the placeholder doesn't adjust to make space for a larger font. Md-input does do this, so select should as well.

[renevall]

Just for reference Kara, I put a md-select after a md-input, and it overlaps without changing the font size.

<div>
      <md-input-container>
        <input md-input type="text" name="name" placeholder="Full name" formControlName="name">
      </md-input-container>
    </div>
    <div>
      <md-select placeholder="Company Name" formControlName="company">
        <md-option *ngFor="let company of companies" [value]="company.value">{{ company.viewValue}}</md-option>
      </md-select>
    </div>

[villaratio]

I had the same issue.
I was able to workaround it by applying the following style (which basically remove the hard-coded values)

:host /deep/ .mat-select-trigger {
    font-size: inherit;
    height: inherit;
}

:host /deep/ .mat-select-value-text {
    line-height: inherit;
}

[hblieb]

@P-Jan work around partly worked for me. I only needed the

:host /deep/ .mat-select-trigger {
    font-size: inherit;
}

And I added

.mat-select {
    padding-top: 5px;  //makes the select's baseline align with neighboring text input
    margin-bottom: 14px //makes the text input below my select align with it's neighbor also
}

[javagaba]

Any news on this? This issue still seems to exist in the latest version...

[makdeniss]

I've fixed the alignment issue with this code:

.mat-select {
  margin-top: 14px;
}

You have to play with the margin-top value in your context. But that will align the input field and select field correctly with each other.

[richmwatts]

Still no fix for this?

[qstiegler]

Please fix this issue! Also the space between label and selected option is not the same than between label and text of an input field if you change the font-size.

[willshowell]

AFAIK this will be fixed by #6488

[jelbourn]

Should be resolved with the existence of mat-form-field

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}