-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Encapsulating all content within <md-toolbar> tag should not trigger an extra <md-toolbar-row> tag when there's no top level content/elements present
i.e.
<md-toolbar color="primary">
<md-toolbar-row>First Row</md-toolbar-row>
<md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
What is the current behavior?
When using only nested <md-toolbar-row> components there is an extra top row produced
e.g.
<md-toolbar class="mat-toolbar mat-primary" color="primary" role="toolbar" ng-reflect-color="primary">
<div class="mat-toolbar-layout">
<md-toolbar-row class="mat-toolbar-row">
</md-toolbar-row>
<md-toolbar-row class="mat-toolbar-row">First Row</md-toolbar-row>
<md-toolbar-row class="mat-toolbar-row">Second Row</md-toolbar-row>
</div>
</md-toolbar>
What are the steps to reproduce?
Create an <md-toolbar> component containing one or more nested <md-toolbar-row> tags and no other markup as siblings.
Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/NMqusqAvplj0eJzqKdk5?p=preview
What is the use-case or motivation for changing an existing behavior?
I would like to custom style the first (or top) toolbar and none of my styles are applied (I'm assuming since the SASS is precompiled at build time and the generated component is not matching the CSS targeting). My work around is wrapping all toolbar content in <md-toolbar-row> tags and providing my own CSS classes
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/core: 4.3.1
@angular/material: 2.0.0-beta.8
typescript: 2.3.4