diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts index 4196edbc633d..0b369e0c137b 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 e0f53fee3fa8..8376a44ab71d 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 e221e9c8c3a4..286cb5be5502 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 25e23fb8c147..3365d5c8caaf 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