md-input with md-prefix and width:100% has weird rendering

[adarshaj]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The prefix on md-input should consume the space enough for the content within prefix.
I made a simple codepen of how it works in angularjs: https://codepen.io/anon/pen/VmKaNv (contrast with material2 impelmentation in plunkr below)

What is the current behavior?

there is a weird amount of space between the prefix and the placeholder text

What are the steps to reproduce?

Code to reproduce buggy behavior:

<md-input floatingPlaceholder="false" placeholder="Search" style="width:100%;">
   <span md-prefix><md-icon>search</md-icon>&nbsp;</span>
</md-input>

This Plunker has a simple search box with 100% width, see the preview in a large screen to be sure of behavior.
Plunker template: http://plnkr.co/edit/nCYNQGtfoZPQ04FUFy2L

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

It looks ugly, also, it doesn't conform with other material design implementation (viz. in material design of angularjs)

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

All.

Is there anything else we should know?

Nope.

[Drumarcco]

Apparently this happens because input is using table-cell as css display instead of flex, and table cell widths are distributed differently.

// We use a table layout to baseline align the prefix and suffix classes.
// The underline is outside of it so it can cover all of the elements under
// this table.
// Flex does not respect the baseline. What we really want is akin to a table
// as want an inline-block where elements don't wrap.
.md-input-table {
  display: inline-table;
  flex-flow: column;
  vertical-align: bottom;
  width: 100%;

  & > * {
    display: table-cell;
  }
}

I tried another approach using flex in the following way:

.md-input-table {
  display: flex;
  flex-flow: row;
  align-items: baseline;
  width: 100%;
}

.md-input-infix {
  position: relative;
  flex: 1;
}

And the result was better, but the vertical align feels a little odd:

I don't quite understand the baseline comment though, any references on why flex doesn't respect the baseline?

[yhaskell]

Actually, it does respect baseline. Problem with md-icon is sorted by adding

.md-input-prefix md-icon, .md-input-suffix md-icon  { 
  vertical-align: text-bottom;
}

[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.}