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/material@2.0.0-beta.6 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. #4883, #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.

[carlos-dubon]

Will this be implemented in a near future? I'm looking forward to see this as a native feature.

[thw0rted]

I think this might be the same issue as #10622 which was supposed to be fixed in #10627 . I can't find an example of a Select, specifically, in the "app bar" spec. (There isn't a "toolbar" spec, and I think "app bar" is closest.)

[jelbourn]

Closing since this seems to work fine for the <mat-select>.

[thw0rted]

The screenshot in the OP is how this works today, without a mat-form-field. Wrapping the select in a mat-form-field does not work. Stackblitz example

I can't find any examples where you'd want to use any control in a mat-form-field inside an App Bar, in the spec I linked above. As I pointed out, there's no example of any select in an App Bar either (with or without form-field wrapper), but the OP has a good screenshot of a valid use case for a bare select in the wild. I can't think of a case where you'd want a full-fledged form field -- which can be huge, vertically, with a floating placeholder above and hint text below -- in such a tight spot. Remember, density is coming when MDC launches.

[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.}