Skip to content

MdToolbarModule generates extra toolbar row component #6004

@denver-HJS

Description

@denver-HJS

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions