Components: md-select label higher than md-input

Created on 1 Feb 2017  路  6Comments  路  Source: angular/components

Bug, feature request, or proposal:

Images taken from material.angular.io website. Left is md-input and right is md-select.
image

Why are the labels in different positions?

What is the expected behavior?

Same label position in both components.

What is the current behavior?

md-select label is higher than md-input label.

What are the steps to reproduce?

Just look at md-input/md-select help sections in material.angular.io

What is the use-case or motivation for changing an existing behavior?

User experience is not good.

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.4.4
Angular Material 2.0.0-beta.1
Chrome/IE/Edge

Is there anything else we should know?

md-input-container is not allowed with md-select

Most helpful comment

Has there been a fix for this yet?

All 6 comments

Ok, changing

.md-select-placeholder.md-floating-placeholder { top: -17px; }
.md-select-value { top: 2px; }
.md-select-trigger { height: 25px; }

Also in -17 instead of -22 in:
https://github.com/angular/material2/blob/master/src/lib/select/select-animations.ts#L24
and
https://github.com/angular/material2/blob/master/src/lib/select/select-animations.ts#L29

Fixes the position of all elements.

.md-select-trigger {margin: 8px 0;} worked for me

Yeah, select and input should definitely align. There is an existing issue tracking this though (https://github.com/angular/material2/issues/2124), so closing this as a dupe.

show stopper at the moment
capture

Has there been a fix for this yet?

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alanpurple picture alanpurple  路  3Comments

kara picture kara  路  3Comments

savaryt picture savaryt  路  3Comments

vitaly-t picture vitaly-t  路  3Comments

Miiekeee picture Miiekeee  路  3Comments