Components: toolbar: unable to specify attributes on first toolbar-row

[ThomasBurleson]

Bug, feature request, or proposal:

md-toolbar projects content to an internal md-toolbar-row container and uses FlexBox css to layout in 'row' directions for that container. This means that custom CSS must be used to modify the direction to 'column'.

To achieve something like this is a challenge:

And using the pending Layout API does not work:

<md-toolbar fx-layout="column">
    <div fx-layout="row" fx-layout-align="start center">  Title and buttons here </div>
    <div fx-flex="15px">        simulate a gap                                    </div>
    <div fx-layout="column">    2 lines of text organized vertically              </div>
</md-toolbar>

By default this will layout each child div in a single row instead of the requested column flow direction.

An option for the developer is to use custom CSS:

md-toolbar .md-toolbar-layout md-toolbar-row {
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  min-height: 120px;
}

But this ^^ option is not intuitive and seems to violate the entire idea of the Layout API.

Another solution - of course - is that the developer can add a protection wrapper:

<md-toolbar>
   <div fx-layout="column">
      <div fx-layout="row" fx-layout-align="start center">  Title and buttons here </div>
      <div fx-flex="15px">        simulate a gap                                    </div>
      <div fx-layout="column">    2 lines of text organized vertically              </div>
   <div>
</md-toolbar>

but ^^ solution is dirty and adds complexity.

What are the steps to reproduce?

• See source Source to Flex-Layout Demo

• See live demo Flex-Layout Demos

What is the use-case or motivation for changing an existing behavior?

I propose that all Layout APIs be transcluded to the md-toolbar-row element. This way the developer's original intent is preserved without additional workarounds or hacks.

[AsherBarak]

Following #2279, here is my suggestion:
If the user has not specified any <md-toolbar-row> elements, generate first element and wrap content. If the user has created a <md-toolbar-row> element, treat it as first element.
Current state where we have the content of the first (implicit) element as the sibling of the second (explicit) element is 'hard on the eye'.
This also makes me wonder, in general, what should be done with content in the <md-toolbar> not in a <md-toolbar-row> element, which makes me wonder what exactly is the role of <md-toolbar-row> in the grand scheme of things. Not sure I get it...

[chrissena]

@rbj325 Don't think it is. How can flex-layout directives be applied to the first implicit md-toolbar-row (First Row), like they can for Second Row and Third Row?

Am I missing something?

[rbj325]

@chrissena Misread. Redacted.

[EladBezalel]

After some considerations we've come up with the idea of renaming the md-toolbar-row component into just md-toolbar and either rename the old md-toolbar into md-toolbar-group which will have multiple toolbars one on top of each other or we'd have an md-toolbar-multiline attribute (with the same purpose)

These changes aren't that urgent and can be bypassed with a single div wrapper, but in case it would happen in the future it would be considered a breaking change so better now than ever.

[MaximeAnsquer]

Sorry but I'm not sure I understand, is there currently a way to change the height of the first toolbar-row ? (I want a toolbar which is smaller than 64px).

Thank you very much.

[yogeshgadge]

It looks like there is just no hack to change the height because it comes from mat-toolbar-row which comes from <md-toolbar-row> which is auto generated and you can't override that. It is conventionally accurate to assume that if you include <md-toolbar-row> that would be your first row but this results into 2 rows.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}