From 416f56f6dcafea7124a56fb39907662b799ad079 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 20 Jan 2017 18:34:42 +0100
Subject: [PATCH] fix(select): trim long labels inside md-option (#2444)

* fix(select): not trimming long labels

* Fixes long text not being trimmed inside of `md-option`, because the element is a flex container. Switches it to `display: block` and uses `line-height` to center the text.
* Fixes the selected value not being trimmed, because the element doesn't have a defined width.

Fixes #2440.

* fix: menu icon alignment
---
 src/demo-app/select/select-demo.ts   | 2 +-
 src/lib/core/style/_menu-common.scss | 6 +++---
 src/lib/menu/_menu-theme.scss        | 1 +
 src/lib/select/select.scss           | 3 ++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts
index 4196edbc633..0b369e0c137 100644
--- a/src/demo-app/select/select-demo.ts
+++ b/src/demo-app/select/select-demo.ts
@@ -24,7 +24,7 @@ export class SelectDemo {
 
   drinks = [
     {value: 'coke-0', viewValue: 'Coke'},
-    {value: 'sprite-1', viewValue: 'Sprite'},
+    {value: 'long-name-1', viewValue: 'Decaf Chocolate Brownie Vanilla Gingerbread Frappuccino'},
     {value: 'water-2', viewValue: 'Water'},
     {value: 'pepper-3', viewValue: 'Dr. Pepper'},
     {value: 'coffee-4', viewValue: 'Coffee'},
diff --git a/src/lib/core/style/_menu-common.scss b/src/lib/core/style/_menu-common.scss
index e0f53fee3fa..8376a44ab71 100644
--- a/src/lib/core/style/_menu-common.scss
+++ b/src/lib/core/style/_menu-common.scss
@@ -24,9 +24,9 @@ $md-menu-side-padding: 16px !default;
 @mixin md-menu-item-base() {
   @include md-truncate-line();
 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  // Needs to be a block for the ellipsis to work.
+  display: block;
+  line-height: $md-menu-item-height;
   height: $md-menu-item-height;
   padding: 0 $md-menu-side-padding;
 
diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss
index e221e9c8c3a..286cb5be550 100644
--- a/src/lib/menu/_menu-theme.scss
+++ b/src/lib/menu/_menu-theme.scss
@@ -20,6 +20,7 @@
 
     md-icon {
       color: md-color($foreground, 'icon');
+      vertical-align: middle;
     }
 
     &:hover:not([disabled]), &:focus:not([disabled]) {
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 25e23fb8c14..3365d5c8caa 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -65,8 +65,9 @@ md-select {
 }
 
 .md-select-value {
-  position: absolute;
   @include md-truncate-line();
+  position: absolute;
+  max-width: calc(100% - #{$md-select-arrow-size * 2});
 
   // Firefox and some versions of IE incorrectly keep absolutely
   // positioned children of flex containers in the flex flow when calculating