New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

margin problem when using md-input-container with md-icon and md-label together #2991

Closed
alexpozzani opened this Issue May 26, 2015 · 4 comments

Comments

Projects
None yet
4 participants
@alexpozzani

alexpozzani commented May 26, 2015

This issue can be viewed in the input demo page (https://material.angularjs.org/latest/#/demo/material.components.input).

When the field Email is not focused and is empty, the property margin-top is set to -16px.
But when it receive focus or a value, the margin-top is set to -8px.

It's look like a strange behavior because it resize the container.

In my case, changing the value of margin-top of the class below (located in line 3889) to -16px solved the problem.

md-input-container.md-icon-float.md-input-focused, md-input-container.md-icon-float.md-input-has-value {
margin-top: -16px; }

@ThomasBurleson

This comment has been minimized.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson May 26, 2015

Contributor

That margin-top setting was deliberate; used to keep the spacing between the row fields consistent.

Contributor

ThomasBurleson commented May 26, 2015

That margin-top setting was deliberate; used to keep the spacing between the row fields consistent.

@alexpozzani

This comment has been minimized.

Show comment
Hide comment
@alexpozzani

alexpozzani May 26, 2015

I understand, but this problem causes the space between the fields increase or decrease depending on the state of the field.
See this screens of the demo page:
8px
16px

alexpozzani commented May 26, 2015

I understand, but this problem causes the space between the fields increase or decrease depending on the state of the field.
See this screens of the demo page:
8px
16px

@SijanC147

This comment has been minimized.

Show comment
Hide comment
@SijanC147

SijanC147 Jun 17, 2016

I know this is an old post, but i've also had this problem, recently in making a login dialog, the margin transition was causing all elements below the input to get pushed down. I resorted to manually setting the margin to 0.

Not sure I follow the reasoning behind having it become -16px, at least no in my case.

image

SijanC147 commented Jun 17, 2016

I know this is an old post, but i've also had this problem, recently in making a login dialog, the margin transition was causing all elements below the input to get pushed down. I resorted to manually setting the margin to 0.

Not sure I follow the reasoning behind having it become -16px, at least no in my case.

image

@galibimtiaz

This comment has been minimized.

Show comment
Hide comment
@galibimtiaz

galibimtiaz Oct 13, 2016

I am having the same problem , its taking too much space.

galibimtiaz commented Oct 13, 2016

I am having the same problem , its taking too much space.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment