md-select is not consistent to input containers in form

[marshfire]

Hi,

I'm trying to use the md-select in a form in a dialog and I can't get any consistent layout for it. See the result below. I would expect the line of the interval select to be the same position as of the input and it would be more consistent to have the label on top also.

Any hints on how to reach that? Browser is Chrome.

it is generated with the following code (jade):

md-input-container
  label Name
  input(ng-model="budget.name")
md-input-container
  label Description
  input(ng-model="budget.info")
div(layout, layout-sm="column")
  md-input-container(flex)
    label Start date
    input(type="date", ng-model="budget.startdate")
  md-select(ng-model="budget.interval", placeholder="Interval", flex)
    md-option(ng-value="opt", ng-repeat="opt in intervals") {{ opt }}
md-input-container
  label Icon
  input(ng-model="budget.icon")
md-input-container
  label Amount
  input(ng-model="budget.budget", ng-currency, currency-symbol="{{budget.currencySymbol}}")

[fabioginzel]

In my application still does not work

[marshfire]

Same here, it is better, but not perfect:

[fabioginzel]

+1

[shannon]

Yea mine is still a pixel or two off as well. I imagine #1586 might makes some changes to the layout anyways so we'll have to see how that plays out.

[richardlt]

I had the same problem as @marshfire (the arrow not aligned on the right), resolved with the css hack :

.md-select-icon{
    display: flex !important;
    flex: 1 !important;
    align-items: initial !important;
    text-align: right !important;
    flex-flow: row-reverse wrap !important;
}

Not so pretty but it works...

[ThomasBurleson]

Reopening because it appears to still be displaced.
@marshfire - can you provide a CodePen or Plunkr that demonstrates this issue.

[richardlt]

Just did it.

The copy/paste from the angular website example http://plnkr.co/edit/OM5miUro4j8W81jEC6uS?p=preview

First remove the md-input-container and you will see the select http://plnkr.co/edit/bTZrWGIcFKj5Pp3ewOBw?p=preview

If you tried to resize the select the arrow is not on the right http://plnkr.co/edit/eEm7Yv0Dg6B5CQAS8ing?p=preview

Finally, resized with the css hack http://plnkr.co/edit/eD0HCZPywSRmbV5YTZJ6?p=preview

[ThomasBurleson]

@richardlt - thank you.

[marshfire]

I modified the plunker to be able to check against input

http://plnkr.co/edit/dmWy8ejNgqtOPQsFo4Tw?p=preview

[richardlt]

http://plnkr.co/edit/a3bPX0qs6Y7X5Dmb9Jzl?p=preview ;)
Pending the correction.

[nine-2-five]

The selects are not aligned with inputs (angular 1.5.5, angular-material 1.0.9)