diff --git a/src/dev-app/menu/menu-demo.ts b/src/dev-app/menu/menu-demo.ts index ed7d846d9f49..7be0897af793 100644 --- a/src/dev-app/menu/menu-demo.ts +++ b/src/dev-app/menu/menu-demo.ts @@ -18,13 +18,13 @@ export class MenuDemo { selected = ''; items = [ {text: 'Refresh'}, - {text: 'Settings'}, + {text: 'Settings with a longer name so we can test text wrapping'}, {text: 'Help', disabled: true}, {text: 'Sign Out'} ]; iconItems = [ - {text: 'Redial', icon: 'dialpad'}, + {text: 'Redial with a longer name so we can test text wrapping', icon: 'dialpad'}, {text: 'Check voicemail', icon: 'voicemail', disabled: true}, {text: 'Disable alerts', icon: 'notifications_off'} ]; diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index 6a6d3e5fb771..a0751aee9fff 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -11,7 +11,6 @@ display: flex; flex-direction: row; max-width: 100%; - box-sizing: border-box; align-items: center; -webkit-tap-highlight-color: transparent; diff --git a/src/material/core/style/_menu-common.scss b/src/material/core/style/_menu-common.scss index 5fabe9374078..6dadd86dcf33 100644 --- a/src/material/core/style/_menu-common.scss +++ b/src/material/core/style/_menu-common.scss @@ -21,14 +21,22 @@ $mat-menu-icon-margin: 16px !default; -webkit-overflow-scrolling: touch; // for momentum scroll on mobile } -@mixin mat-menu-item-base() { - @include mat-truncate-line(); +@mixin mat-menu-item-base( + $display: block, + $truncate: true, + $height: $mat-menu-item-height, + $line-height: $height) { + + @if $truncate { + @include mat-truncate-line(); + } // Needs to be a block for the ellipsis to work. - display: block; - line-height: $mat-menu-item-height; - height: $mat-menu-item-height; + display: $display; + height: $height; + line-height: $line-height; padding: 0 $mat-menu-side-padding; + box-sizing: border-box; text-align: left; text-decoration: none; // necessary to reset anchor tags diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss index afcd241fc5ee..96bb1713cef6 100644 --- a/src/material/menu/menu.scss +++ b/src/material/menu/menu.scss @@ -6,6 +6,7 @@ $mat-menu-vertical-padding: 8px !default; $mat-menu-border-radius: 4px !default; $mat-menu-submenu-indicator-size: 10px !default; +$mat-menu-item-vertical-padding: 8px !default; .mat-menu-panel { @include mat-menu-base(); @@ -41,9 +42,17 @@ $mat-menu-submenu-indicator-size: 10px !default; .mat-menu-item { @include mat-button-reset(); - @include mat-menu-item-base(); + @include mat-menu-item-base(flex, false, auto, normal); position: relative; + // TODO(crisbeto): most of these can be moved into the `mat-menu-item-base` + // once we start allowing text wrapping in mat-select and mat-autocomplete. + align-items: center; + white-space: normal; + min-height: $mat-menu-item-height; + padding-top: $mat-menu-item-vertical-padding; + padding-bottom: $mat-menu-item-vertical-padding; + &[disabled] { // Usually every click inside the menu closes it, however some browsers will stop events // when the user clicks on a disabled item, **except** when the user clicks on a non-disabled