feat: properly align lists within dialogs

[rolandjitsu]

Bug, feature request, or proposal:

Feature

What is the expected behavior?

According to the Material specs, there are Simple Dialogs, which allows for the use of lists within a dialog. Lists in dialogs should be properly aligned (either remove padding on dialog when there's lists inside them or the padding on the list itself if it's a child of a dialog).

What is the current behavior?

Currently lists look a little odd in a dialog.

What are the steps to reproduce?

Render a simple dialog with the following content:

<md-nav-list>
    <h1 md-subheader>Test</h3>
    <a *ngFor="let item of items; trackBy" md-list-item (click)="goToItem(item)">
        <h2 md-line>{{item.name}}</h2>
    </a>
</md-nav-list>

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

Since the specs allow for this, it would be a good idea to support it.

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

Angular 4.1.3 Material 2.0.0-beta.6 TypeScript 2.3.3 Mac OS X 10.12.4

Is there anything else we should know?

[willshowell]

When https://github.com/angular/material2/pull/4722 lands, you should be able to do something like,

comp.ts

this.dialog.open(MyListDialogComponent, { panelClass: 'list-dialog-panel' })

global.css

.list-dialog-panel .mat-dialog-container {
  padding: 0;
}

Though I'd also be curious whether this is something that should be supported out of the box.

[rolandjitsu]

@willshowell since it's a spec, it should probably be supported out of the box, or so I'd like 😄

[patmilano]

Hi @willshowell I am only posting here because this is mostly related to trackBy. What would you do in this situation?

I am implementing this plnkr (that I believe you wrote) and am running into issues with it.

[jelbourn]

Going to close this since it looks obsolete based on the 2018 Material Design spec update.

Aside from that, though, I don't see a good way to support this from an API standpoint. The default dialog experience has padding, and adding some kind of configuration or alternate method to change that seems more complicated than customizing the CSS.

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