Components: select within toolbar disappears with sample themes

[nkwood]

Bug, feature request, or proposal:

Bug. (Assuming this is something that is intended to be supported)

What is the expected behavior?

Select placed within toolbar with sample themes should be colored as to be visible.

What is the current behavior?

Select placed within toolbar with sample themes is not visible.

What are the steps to reproduce?

Plunker demonstrating issue: http://plnkr.co/edit/7Nd4YFZ05mdYt96yp5ir?p=preview

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

Support placement of selects within toolbars for the default themes, e.g.:

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

At least through @angular/[email protected] and Chrome 60.0.3107.4.

Is there anything else we should know?

This might be too special a use case to support, requiring the user to manage the styles for the select in this instance, but given previous work to get the color of select right with the themes (e.g. https://github.com/angular/material2/pull/4883, https://github.com/angular/material2/pull/4568) this would be nice to have.

[tomwanzek]

Is there an update on this issue? I have the same requirement, the use of mat-select inside a mat-toolbar.

IMHO the ability to use mat-select within a toolbar is fundamental.

The issue remains the same, if I wrap the mat-select into mat-form-field. The colors of the select element are not readily controllable to work within the toolbar. See also issue #9513, which was just closed due to an issue template formality.

[akanieski]

Any updates? looking for the same.

[SieBrum]

Any updates yet?

[mrmokwa]

Anyone found any workaround for it meanwhile?

[JaimeStill]

Agree that any <mat-form-field> element should natively fit inside of a <mat-toolbar>. The work around I have for now is as follows:

mat-toolbar.mat-toolbar mat-form-field.mat-form-field {
  font-size: 12px;

  label.mat-form-field-label {
    font-weight: bold;
  }
}

Which will cause a <mat-select> to look as follows:

Toolbar Select StackBlitz

• material-style.scss - See line 107.
• app.component.html - See line 6.