{"id":269,"date":"2018-06-15T16:24:28","date_gmt":"2018-06-15T16:24:28","guid":{"rendered":"http:\/\/www.bullcrane.com\/angular\/?p=269"},"modified":"2018-06-15T16:35:09","modified_gmt":"2018-06-15T16:35:09","slug":"styling-mat-menu-items","status":"publish","type":"post","link":"http:\/\/www.bullcrane.com\/angular\/2018\/06\/15\/styling-mat-menu-items\/","title":{"rendered":"Styling mat-menu items"},"content":{"rendered":"
Problem<\/h6>\n

I want Angular Material drop-down menu items to go wider before resorting to elipsis.<\/p>\n

Here is a simplified example.  Angular Material cuts off the item, displaying elipsis<\/p>\n

html:<\/p>\n

<mat-menu #playlistMenu=\"matMenu\">\r\n  <button mat-menu-item>\r\n    aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll\r\n  <\/button>\r\n<\/mat-menu>\r\n<button mat-button class=\"mat-title\" \r\n  [matMenuTriggerFor]=\"playlistMenu\">\r\n  Playlist <i class=\"material-icons\">arrow_drop_down<\/i>\r\n<\/button><\/pre>\n
Results:<\/p>\n
\"\"<\/p>\n
Solution<\/h6>\n
By providing my own class with a selector that is more specific than what Angular Material is using, my style declarations come in as overrides.  All other stylings remain in effect.<\/p>\n
In styles.css:<\/p>\n
div.plMenuCSS { \r\n  max-width:500px;\r\n  background-color:lightgreen;\r\n  }<\/pre>\n
Then in the html:<\/p>\n
<mat-menu #playlistMenu=\"matMenu\">\r\n  <button mat-menu-item class=\"plMenuCSS\"<\/span>>\r\n    aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll\r\n  <\/button>\r\n<\/mat-menu>\r\n<button mat-button class=\"mat-title\" \r\n  [matMenuTriggerFor]=\"playlistMenu\">\r\n  Playlist <i class=\"material-icons\">arrow_drop_down<\/i>\r\n<\/button><\/pre>\n
Results:<\/p>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
Problem I want Angular Material drop-down menu items to go wider before resorting to elipsis. Here is a simplified example.  Angular Material cuts off the item, displaying elipsis html: <mat-menu #playlistMenu=”matMenu”> <button mat-menu-item> aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll <\/button> <\/mat-menu> <button mat-button class=”mat-title” [matMenuTriggerFor]=”playlistMenu”> Playlist <i class=”material-icons”>arrow_drop_down<\/i> <\/button> … <\/p>\n
Continue reading “Styling mat-menu items”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/269"}],"collection":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":17,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"predecessor-version":[{"id":288,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/269\/revisions\/288"}],"wp:attachment":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}