md-select: Header is outside of toolbar when selected

[epelc]

Actual behavior:

• What is the issue? * The header text is outside of the toolbar
• What is the expected behavior? It should fit in the toolbar

CodePen or Steps to reproduce the issue: *

• CodePen Demo which shows your issue : http://codepen.io/epelc/pen/mPoLEW
• Details: If you select an item in an md-select the header is shown partially outside of the toolbar.

Angular Versions: *

• Angular Version: 1.4.8(docs and codepen above) and 1.5.5(local project)
• Angular Material Version: 1.0.8(docs and codepen) and 1.0.7(local project)

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 50.0.2661.102 (64-bit)
• OS: * OS X El Capitan 10.11.4
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[epelc]

@ThomasBurleson Can you reopen this? It's still a pretty big issue for me.

I found you can sorta fix this if you remove the margin-bottom for md-input-container if it has a select with a label(not sure about automatic css for this but you can add a class for now). It doesn't work well if you have two selects next to each other and only one has a label.

@ThomasBurleson Is there any chance you can ask the material design spec team to clarify the proper spacing for select's in toolbars?

The toolbar spec doesn't mention select's at all. The menu has a picture of the menu open for a menu button but nothing on selects. I only mention the menu page because the menu popup is somewhat related.