fix 1px jitter and baseline alignment

Author: mmalerba

src/demo-app/baseline/baseline-demo.html

@@ -14,9 +14,12 @@
       <input mdInput placeholder="Input" value="Text Input">
     </md-form-field>
     | Text 5 |
-    <md-select placeholder="Select">
-      <md-option value="option">Option</md-option>
-    </md-select>
+    <md-form-field>
+      <md-select placeholder="Select">
+        <md-option value="option">Option</md-option>
+        <md-option value="long">This option is really really really long</md-option>
+      </md-select>
+    </md-form-field>
     | Text 6 |
     <md-form-field>
       <textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>
@@ -42,9 +45,12 @@ <h1>
         <input mdInput placeholder="Input" value="Text Input">
       </md-form-field>
       | Text 5 |
-      <md-select placeholder="Select">
-        <md-option value="option">Option</md-option>
-      </md-select>
+      <md-form-field>
+        <md-select placeholder="Select">
+          <md-option value="option">Option</md-option>
+          <md-option value="long">This option is really really really long</md-option>
+        </md-select>
+      </md-form-field>
       | Text 6 |
       <md-form-field>
         <textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>

src/lib/select/select.html

@@ -1,14 +1,15 @@
 <div #trigger #origin="cdkOverlayOrigin" cdk-overlay-origin class="mat-select-trigger"
      aria-hidden="true" (click)="toggle()">
-  <span class="mat-select-value">
+  <div class="mat-select-value">
     <div #measureFontSize class="mat-select-measure-font-size" aria-hidden="true"></div>
+    <ng-container *ngIf="empty">&nbsp;</ng-container>
     <span class="mat-select-value-text" *ngIf="!empty" [ngSwitch]="!!customTrigger">
       <span *ngSwitchDefault>{{ triggerValue }}</span>
       <ng-content select="md-select-trigger, mat-select-trigger" *ngSwitchCase="true"></ng-content>
     </span>
-  </span>
+  </div>
 
-  <span class="mat-select-arrow"></span>
+  <div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
 </div>
 
 <ng-template

src/lib/select/select.scss

@@ -4,7 +4,6 @@
 @import '../core/style/vendor-prefixes';
 @import '../core/a11y/a11y';
 
-$mat-select-trigger-min-width: 112px !default;
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
 $mat-select-panel-max-height: 256px !default;
@@ -16,15 +15,12 @@ $mat-select-item-height: 3em !default;
 
   // Inside of a form field we want it to expand to take the available space.
   .mat-form-field & {
-    display: block;
     width: 100%;
   }
 }
 
 .mat-select-trigger {
-  display: flex;
-  align-items: center;
-  min-width: $mat-select-trigger-min-width;
+  display: inline-table;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
@@ -36,16 +32,22 @@ $mat-select-item-height: 3em !default;
 }
 
 .mat-select-value {
-  display: flex;
-  flex: auto;
-  align-items: center;
-  min-width: 0;
+  display: table-cell;
+  max-width: 0;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .mat-select-value-text {
   @include mat-truncate-line();
 }
 
+.mat-select-arrow-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
 .mat-select-arrow {
   width: 0;
   height: 0;