Toolbar content overflow problem.

[rpicone]

Bug, feature request, or proposal:

Bug with toolbar content overflow.

What is the expected behavior?

The toolbar content should be kept inside the toolbar with ellipsis

What is the current behavior?

The content transpass the height of the toolbar.

What are the steps to reproduce?

Here is the Plunker:
http://plnkr.co/edit/HxeAlLOVKhpnKl5ifSq5?p=preview

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

Better visual.

Which versions of Angular, Material, OS, browsers are affected?

"@angular/material": "2.0.0-beta.1",

Is there anything else we should know?

[dahaupt]

Well, it happens because of :

md-toolbar-row {
   height: 64px;
}

I'm not sure if we should make the toolbar more flexible or stick to this height due to the spec.

@rpicone Do you have this problem in one of your applications?

[rpicone]

@dahaupt, yes I´m having this problem but reading flexbox-truncated-text I could find a solution to work with ellipsis inside the toolbar:

http://plnkr.co/edit/K44BuhjqJmhKR2GoTK5y?p=preview

[devversion]

@rpicone Yeah, the problem is that text-overflow: ellipsis won't work on flex parents and flex items properly.

The ellipsis can be archived for flex items, by using the workaround you mentioned (using min-width: 0), but it won't help when having a flex parent (as the md-toolbar-row)

The PR #2454 just ensures that the text never exceeds / overflows the toolbar row.

[angular-automatic-lock-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.}