md-datepicker, should add CSS class to overlay refs for easy targeting of styles

[jt-helsinki]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

All dates and text inside the touch UI date picker modal fits nicely inside the modal.

What is the current behavior?

Text is currently overflowing. This happens when using iPhone 5.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

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

Iphone 5
Safari

Also chrome in "phone simulation mode".

Is there anything else we should know?

[mmalerba]

Can you provide an example to reproduce? It seems to work fine with the "Datepicker Touch" example on the docs site, even when I put chrome in iPhone5 simulation mode: https://material.angular.io/components/datepicker/overview

[jt-helsinki]

Here are a couple of screenshots.

Material 2.0.0-beta.8

In desktop Chrome.

Simulation mode on Iphone 5 Chrome.

[mmalerba]

Maybe you have some CSS on the page thats interfering with it. It appears to be fine on the material demo site:

[jt-helsinki]

ok, will check css AND upgrade to latest material. that might fix it.

[jt-helsinki]

So it turns out that I do have a style inside the css which conflicts.

.mat-dialog-container {
       padding: 0px !important;
}

Unfortunately I need this so my dialogs have a zero margin for toolbars etc. I think this issue may be relevant:

#5537

[mmalerba]

I recommend using the panelClass option for dialog to add a special class that you can target, only on dialogs that have the toolbar. e.g.:

.toolbar-dialog .mat-dialog-container {
  padding: 0 !important;
}

It would probably be worth adding classes to the datepicker to make it easier for people to target styles specifically at it, I'll leave this issue open to track that

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