bug(mat-divider): wrong styling

[jotatoledo]

Bug, feature request, or proposal:

Bug introduced by #5862

What is the expected behavior?

• A mat-divider with inset=true is vertically aligned to the start of a mat-list-item text
• The behavior is the same when used in a mat-list contained in a card

The lists (inside and outside the card) should look as presented in https://material.io/guidelines/components/dividers.html#dividers-usage

What is the current behavior?

• A mat-divider with inset=true wont align vertically to the start of a mat-list-item text
• Behavior is removed when used inside of a mat-list contained in a mat-card

What are the steps to reproduce?

https://stackblitz.com/edit/angular-mat-div-issue?file=index.html

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

Angular 5.x.x
Material 5.0.3

Looking at it this is the issue

.mat-divider.mat-divider-inset {
    margin-left: 80px;
}

[CaerusKaru]

Alright, two things: (1) the mat-divider, when used in a list, belongs inside the mat-list-item as shown in the demo-app here.

But more importantly, (2) mat-divider in inset mode in lists right now exclusively works with matListAvatar, that's why the sizing is a little weird. I'll try and piece together a fix that makes this more dynamic, but if you have a solution already in mind, I'd love to hear it.

The last bit is that your piece about the behavior reverting in cards is because the mat-card stylings are erroneously being applied to the divider when it should only have mat-list stylings. I'll attempt to patch this as well in a separate PR.

[jotatoledo]

Hey @CaerusKaru thx for the quick reply!

(1) Saddly I almost exclusively look for examples in material.io and atm there isn't any example that showcases the use of mat-divider to separate list items (the existent one is display separation of subgroups). Maybe a new one that shows the use case you just explained could be added? Maybe the same two showcased in materialjs for md-divider?

(2) Yup, styling is correctly applied to a .mat-divider-inset contained in a mat-list-item with matListAvatar (but not inside a .mat-card).

A possible solution would be the following:

.mat-list .mat-list-item .mat-list-icon ~ .mat-divider.mat-divider-inset {
    left: 64px;
    position: absolute;
    margin: 0;
    width: calc(100% - 64px);
}

.mat-list .mat-list-item .mat-list-avatar ~ .mat-divider.mat-divider-inset {
    left: 72px;
    position: absolute;
    margin: 0;
    width: calc(100% - 72px);
}

The position:absolute is required to override the position:static applied when the mat-divider is in a .mat-card.

Ill try to take a look at the issue and come up with a PR

[CaerusKaru]

@jotatoledo Thank you very much for your CSS solution. It's been incorporated into PR #9242, which offers the dynamic solution I was talking about (just in case icons/avatars are not the only precursors in the future). Once this is merged, I will look into adding some examples for material.angular.io (probably what you described, copying the examples from AngularJS Material)

[CaerusKaru]

I think the reason there isn't a page on material.angular.io yet is because mat-divider hasn't been officially published yet, and won't be available until version 5.1 comes out. You can of course provide additional examples to this part of the repo (the one there right now is pretty simplistic).

[jotatoledo]

Looks rlly good, glad I could help. Yeah, but as I mentioned before, it would be helpful to add those examples from materialjs into the list doc. For the moment I dont see the need of a dedicated section for mat-divider

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