Components: Input and select misaligned

Created on 3 Jun 2017  路  9Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug

sem titulo

What is the expected behavior?

Alignment according to another field

What is the current behavior?

Misaligned

What are the steps to reproduce?

https://embed.plnkr.co/cqdmVrghMOpUOYESWySg/

Is there anything else we should know?

I'm building a layout according to the project https://github.com/EladBezalel/material2-start
This uses:

: Host { 聽聽 Display: flex; 聽聽 Flex: 1; }

In your css, so when I started to use in my project I noticed a disagreement at the height of the fields as picture and plunker. I'm not sure if this is an expected behavior, or if the behavior of the select field should not be interfered with.

Most helpful comment

I just re-did the md-input-container to make all the spacing match the spec. We need to do a similar treatment for the md-select. Actually ideally we should refactor it so that the same CSS styles can be shared by the two components.

All 9 comments

Should be fixed by https://github.com/angular/material2/pull/4788, which was merged in yesterday.

@crisbeto

Test with the most recent version that you commented that could have corrected and seems to me to remain the same ... see:

http://embed.plnkr.co/o077B6uEiiIgkC0S06dd/

print

Seems like that Plunkr is empty. Can you post it again?

@crisbeto , Sorry, continue again

http://embed.plnkr.co/DXq5ZNNyhtBeSrjayiC3/

You can get them to (mostly) align if you add align-items: baseline to the container. It seems like our baseline is still ~1px off though @mmalerba.

I just re-did the md-input-container to make all the spacing match the spec. We need to do a similar treatment for the md-select. Actually ideally we should refactor it so that the same CSS styles can be shared by the two components.

This is still happening to me
version: @angular/[email protected]

see #2124

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